Hướng dẫn jquery ajax php

Phương thức “get()”

Vì có sự tương đồng giữa “get() ” và “load() ” nên chắc hẳn cách dùng cũng không có phần khác lạ so với các ví dụ ở trên, nhưng cần lưu ý một số cú pháp để tránh nhầm lẫn với “load() ”:

	$(document).ready(function() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$.get('vidu1.html', function(ketqua) {
				$('#noidung').html(ketqua);
				$('#noidung').html($('#chuoi-can-lay').html());
			});
			
		});
	});

Kết quả khi chạy ví dụ trên:

1. Đoạn code này cho bạn thấy rằng để sử dụng được phương thức “get() ”, các bạn cần dùng đến biến “$ ” (hay “jQuery ”) sau đó sử dụng thẳng phương thức “get() ” chứ không giống như “$(‘#id-can-lay’).load() ” như ví dụ trước ta đã xem ở phương thức “load() ”.
2. Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “load() ”.
3. Kết quả trả về sẽ thông qua đối số thứ 2 của phương thức “get() ” là một Anonymous Function có đối số mặc định trả về là “ketqua ” như chúng ta đã thấy. Các bạn có thể dùng “console.log(ketqua) ” và bật F12 của trình duyệt trên Chrome/Mozilla/Opera để xem kết quả trả về khi click vào.
4. Và để tách lọc dữ liệu từ “ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “ ” của chúng ta. Sau đó chúng ta dùng tiếp “$(‘#id-can-lay’).html() ” để tách lọc dữ liệu như ở phương thức “load() ” mà chúng ta đã xài trước đó. Các bạn có thể bỏ đi dòng “$('#noidung').html($('#chuoi-can-lay').html()) ” để thấy sự tương đồng giữa “load() ” và “get() ” chỉ khác nhau về cách dùng.

Ngoài ra “get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu, tuy nhiên cái này thuộc về sự hiểu biết của các bạn trong kĩ thuật lập trình Web nên tôi không nói nhiều ở đây, không thì sẽ loãng bài viết.

Phương Thức “post()”

Trong phương thức này, cần có ít nhất một ngôn ngữ động ở phía hệ thống để nhận lấy dữ liệu từ phương thức “post() ” truyền qua. Vì thế, ở đây tôi sẽ dùng PHP để demo cho các bạn.

Cách dùng của phương thức “post() ” sẽ giống với “get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.

$(document).ready(function() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$.post('vidu2.php', {
				emNguoiYeu: "Em Yêu Anh",
				anhNguoiYeu: "Anh không phải người dễ dãi nhé"
			},function(ketqua) {
				$('#noidung').html(ketqua);
			});
			
		});
	});

Nội dung của file "vidu2.php":

' .print_r($_POST,true). '

Kết quả ví dụ trên sau khi thực thi:

Ở ví dụ phương thức “post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.

Như vậy chúng ta đã hoàn tất tìm hiểu xong “get() ” và “post() ” rồi. Quá dễ đúng không nào? Đến với phần tiếp theo chúng ta sẽ tìm hiểu đến phương thức “ajax() ” mạnh nhất trong thư viện jQuery. Nên đòi hỏi cách dùng nó cũng tương đối khó khăn hơn nhưng vẫn dễ rất nhiều hơn so Javascript thuần.

Phương thức “ajax()”

Cách sử dụng phương thức nãy vẫn giống cách gọi của các phương thức “get() ” và “post() ” nhưng chúng ta thay vì truyền đường dẫn trực tiếp vào phương thức thì phương thức “ajax() ” lại chấp nhận đối số đầu tiên chính là cấu hình cho kĩ thuật Ajax của chúng ta:

	$(document).ready(function() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$.ajax({
				url: 'vidu2.php',
				type: 'POST',
				dataType: 'html',
				data: {
					emNguoiYeu: "Em Yêu Anh",
					anhNguoiYeu: "Anh không phải người dễ dãi nhé"
				}
			}).done(function(ketqua) {
				$('#noidung').html(ketqua);
			});
			
		});
	});

Các bạn thấy chứ? Rõ ràng đối số đầu tiên chúng ta truyền vào cho phương thức “ajax() ” chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:

1. url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu
2. type : phương thức gửi đi tương tự như của “ ”, mặc định là “GET” nếu như các bạn không truyền vào.
3. dataType : xác định dữ liệu trả về thuộc dạng nào? Nếu các bạn không truyền thì jQuery tự động nhận biết kiểu dữ liệu (script, html, json…). Tuy nhiên, tôi khuyến cáo các bạn nên truyền vào đầy đủ để nhận dữ liệu chính xác nhất. Và thông dụng nhất chính là “html”.
4. data : truyền dữ liệu sang đường dẫn chỉ định để thực hiện xử lý và trả về dữ liệu. Tương tự như cách truyền dữ liệu của phương thức “post() ”.
5. “done() ” : ở loạt các bài viết hướng dẫn các bài viết về kĩ thuật Ajax với phương thức “ajax() ” trước đây trên Internet. Thay vì dùng “done()” chúng ta sẽ dùng thuộc tính “success” trong đối tượng truyền vào “ajax() ” nhưng từ các phiên bản mới hơn của jQuery. Họ khuyến cáo chúng ta nên sử dụng các phương thức như “done() , fail() , always() ” (Tương ứng: Hoàn thành, thất bại và luôn luôn thực hiện). Nên tùy vào nhu cầu mà bạn xài phương thức tương ứng. Và nên nhớ là đi kèm với phương thức “ajax() ” hoặc lưu vào một tên biến rồi dùng sau để nhận kết quả trả về.

Kết quả thực thi ví dụ trên:

Hoàn toàn không khác ví dụ trước ở phương thức “post() ” đúng không nào? Và không chỉ có nhiêu đó, phương thức “ajax() ” còn hỗ trợ hàng tá các chức năng khác nhưng tôi không thể giới thiệu hết cho các bạn trong nội dung bài viết này được. Các bạn có thể xem thêm về tài liệu hướng dẫn của phương thức trên tại: http://api.jquery.com/category/ajax

Các bạn có thể tải toàn bộ Sources Code của các ví dụ trên tại đây.

Trân trọng cám ơn độc giả đã xem qua bài viết này, mong được sự ủng hộ của các bạn ở các bài viết tới.

(Visited 47,757 times, 1 visits today)