jQuery Ajax (P.2)

0
397

[ VIDEO TUT ]

  • Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :

1. Giới thiệu

Bài hôm nay tôi sẽ giới thiệu cho các bạn phương thức Load trong jQuery, phương thức này giúp chúng ta tải dữ liệu thông qua một file bên ngoài.

2. Tải file với phương thức Load

Cú pháp:

  • $(“selector”).load(“file_url”);

Trong đó:

  • selector: HTML Tag, Class, ID
  • file_url: đường dẫn đến file cần tải

Ví dụ:

Các bạn tạo trước một file demo.txt có nội dung

Tiếp đến tại một file index.html với nội dung như sau:

Kết quả hiển thị trên trình duyệt web trước khi click vào Button Action

1

Và kết quả hiển thị trên trình duyệt web sau khi click vào Button Action

2

Chú ý: Các bạn nhớ gọi thư viện jQuery vào nhé

3. Lọc dữ liệu theo Selector bằng Phương thức Load

Cú pháp:

  • $(“selector-1”).load(“file_url selector-2”);

Trong đó:

  • selector-1: HTML Tag, Class, ID của phần tử muốn tải dữ liệu
  • file_url: đường dẫn đến file cần tải
  • selector-2: HTML Tag, Class, ID của phần tử nằm trong sẽ được tải sang (đây là phần tử thuộc nội dung file cần tải)

Ví dụ:

File demo.txt sẽ có nội dung như sau:

File index.html sẽ có nội dung như sau:

Bây giờ chạy file index.html và click Button Action thì các bạn sẽ thấy kết quả hiển thị trên trình duyệt web sẽ như sau:

3

Lý do kết quả hiển thị như trên bởi vì phương thức Load sẽ tải dữ liệu thuộc cấu trúc của Selector là thẻ a (link) mà thôi.

4. Phương thức Load khi tham số là một hàm (callback)

Cú pháp:

  • $(“selector”).load(“file_url”, function(response, status, object){});

Trong đó:

  • selector: HTML Tag, Class, ID
  • file_url: đường dẫn đến file cần tải
  • response: dữ liệu tải vào sẽ được trả về cho tham số này
  • status: success hoặc error cho các trường hợp tải được dữ liệu hoặc không
  • object: đối tượng lưu trữ các thông tin của quá trình tải dữ liệu

Ví dụ:

Cập nhật lại nội dung code của file index.html

Chạy file index.html, các bạn sẽ thấy kết quả hiện thị trên trình duyệt web như sau:

4

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Các bạn tham khảo các bài học ajax khác tại đây.

Thầy Giáo Quốc Dân: Tuấn Hoàng

[Total: 2    Average: 4.5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here