Gọi ajax jquery php

Danh sách các bài viết trong chuyên mục PHP Ajax, đây là những bài viết mới nhất được cập nhật trong chuyên mục PHP Ajax

Nội dung chính Hiển thị

Ajax là một kỹ thuật thường được sử dụng trong các trang web ứng dụng 2. 0 bởi vì nó giúp các thao tác trên website trở nên nhanh và chuyên nghiệp hơn. Đối với một nhà phát triển PHP không sử dụng được kỹ thuật này, kết quả thật là bất lợi khi đi xin việc đấy

Hồi trước khi học Ajax mình hay mơ hồ không biết bắt đầu từ đâu? . Nghĩ lại thấy mình hồi đó thật tệ

Nhưng bây giờ thì khác, nhà nhà đều có mạng nên bạn sẽ dễ dàng hơn rất nhiều. Tuy tuts nhiều nhưng mình thấy các nguồn học PHP Ajax hiện nay tuy nhiều nhưng vẫn rời rạc, vì vậy mình tạo chuyên đề học Ajax này Giúp bạn khỏi mất công đi tìm nhiều nơi để giải quyết một vấn đề đơn giản

Trọng tâm chủ yếu của chuyên đề này là đề cập đến cách sử dụng ajax và thư viện jquery khi thao tác với Ajax. Vì mỗi website sẽ có những chức năng khác nhau phụ thuộc vào yêu cầu của dự án nên mình không thể trình bày hết các ví dụ được đưa ra. Nhưng nếu bạn đã xem và hiểu hết tất cả các bài học ajax thì nó không còn khó đối với bạn nữa

+PHP AJAX1Ajax là gì?

Giới thiệu

Và trong cặp thẻ “

Bước 1. Tải tệp “chỉ mục. html” mà chúng ta đã xây dựng bên trên

Hướng dẫn jquery ajax php

Bước 2. Click vào nút “Load data” và chạy thử

Hướng dẫn jquery ajax php

Như vậy, sau 2 bước trên chúng ta đã tải thành công dữ liệu từ “vidu1. html” rồi đấy. Và một câu hỏi đặt ra, đó chính là cách nào mà chúng ta có thể chỉ lấy chuỗi mà chúng ta cần sau khi tải dữ liệu vào hay không? . html” nhé

Đây là vidu1.html

Chuỗi cần lấy tiếp theo

Bạn thấy gì trong ví dụ này? . Và nếu trong trường hợp này, tôi muốn lấy thẻ “

 ” ngăn cách mỗi chuỗi đúng không nào. Và nếu trong trường hợp này, tôi muốn lấy ra thẻ “

 ” có “ id ” là “chuoi-can-lay ”. Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “

Nên là chúng ta đã hoàn tất quá trình tìm hiểu đã hoàn thành phương thức “ load()  ” trong jQuery Ajax rồi đấy.

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

Ở 2 phương thức này thì trong phương thức đó “ get()  ” giống “ load . Tương tự “ ” về mặt kĩ thuật đó chính là dùng “method” là “GET” trong “

 ”. Tương tự “post()  ” sẽ tượng trưng cho “phương thức” là “POST” của “  ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax()” mà chúng ta sẽ làm quen ở phần tới.

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

Hướng dẫn jquery ajax php

  1. Đoạn mã này cho bạn thấy rằng để sử dụng được phương thức “ get()  ”, các bạn cần sử dụng đến biến “< . load() $ ” (hay “jQuery ”) sau đó sử dụng thẳng phương thức “get() ” chứ không giống như “$(‘#id-can-lay’).load()  ” as ví dụ trước ta đã xem ở phương thức “ load()  ”.
  2. Đối số truyền vào không thể tách bộ lọc dữ liệu được trả về thẳng trong đường dẫn dưới dạng 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 Hàm ẩn danh có đối số mặc định . Các bạn có thể sử dụng “ 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 nhấp vào.
  4. Và để tách bộ lọc dữ liệu từ “ ketqua  ” chúng ta cần phải ghi nó vào “DOM” hoặc một nơi nào đó trong cặp. . Sau đó chúng ta sử dụng tiếp “  ” của chúng ta. Sau đó chúng ta dùng tiếp “$(‘#id-can-lay’). html()  ” để tách dữ liệu lọc theo phương thức “ load()  ” mà chúng ta đã sử dụng . Các bạn có thể bỏ qua 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.

Đỡ ra “ get()  ” còn hỗ trợ bạn truyền dữ liệu sang tệp lấy dữ liệu, tuy nhiên cái này thuộc về sự .

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 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 sử 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);
			});
			
		});
	});

Content of file "vidu2. php"

' .print_r($_POST,true). '
';

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

Hướng dẫn jquery ajax php

Ở trong ví dụ phương thức “ post()  ” này, ở đối số thứ 2 thay vì là Hàm ẩn danh như trong ví dụ “ . 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. 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 quá trình tìm hiểu “ get()  ” và “ đăng . Quá dễ sai lầm nào? . Nên yêu cầu cách sử 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 với Javascript thuần túy.  ” 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 vẫn giống như 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);
			});
			
		});
	});

Bạn đã thấy chứ? . in which. 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 . string chứa đường dẫn đến tệp cần lấy và trả về dữ liệu
  2. loại . phương thức gửi đi tương tự như của “  ”, mặc định là “GET” nếu như bạn không truyền vào.
  3. Kiểu dữ liệu . xác định dữ liệu trả về thuộc dạng nào? . Tuy nhiên, tôi khuyến cáo các bạn nên chuyển vào đầy đủ để nhận dữ liệu chính xác nhất. And the most main information is “html”.
  4. dữ liệu . data transfer to the path only to implement process and return data. Tương tự như cách truyền dữ liệu của phương thức “ post()  ”.
  5. xong()  ”. có hàng 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ì sử dụng “done()” chúng ta sẽ 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 . 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

Hướng dẫn jquery ajax php

Ví dụ hoàn toàn không khác trước ở phương thức “ post()  ” không đúng? . 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 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 xuống toàn bộ mã nguồn 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 nhận được sự ủng hộ của các bạn tại các bài viết tới