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ẻ “” tôi sẽ nhắc lại một số cú pháp tôi đã xài để bạn nào quên hoặc chưa biết thì có thể tìm hiểu lại:

  1. $[tài liệu]. sẵn sàng[function[]{…}] . tương tự với sự kiện “ onload  ”, có nghĩa là mã của bạn chỉ được thực thi khi trang được tải xong.
  2. Sự kiện “ nhấp chuột  ” đối số mặc định “e” được sử dụng phương thức “ .  ” giúp chặn lại việc load lại trang từ trình duyệt.
  3. $[‘#id-can-lay’] . trỏ tới thẻ HTML mà bạn cần lấy có “ id  ” là “ #id-can-lay ”. Tương tự với việc các bạn sử dụng cho “lớp  ”.
  4. load[] . has a number is path to file you need to get.

Và bây giờ, chúng ta hãy thử chạy Ví dụ trên xem thế nào nhé

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

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

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 “  ” của chúng ta như sau.

	$[document].ready[function[] {
		$['#load-du-lieu'].click[function[e] {
			e.preventDefault[];
			$['#noidung'].load['vidu1.html #chuoi-can-lay'];
			
		}];
	}];

Và sau đó các bạn chạy và tải lại dữ liệu thì chúng ta sẽ được như sau

Thật bất ngờ không đúng nào? . html” thì chúng ta cần đặt “ id  ” cho thẻ bao lấy dữ liệu mà chúng ta cần tách. Sau đó, thêm vào ĐẰNG SAU đường dẫn như cách chúng ta sử dụng jQuery để trỏ đến một thẻ trong HTML nào vậy.

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

  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"

Chủ Đề