Ở bài viết trước thì chúng ta đã tìm hiểu về phương thức post và get trong Ajax. Trong bài viết này mình sẽ tiếp tục hướng dẫn các bạn về một phương thức đơn giản nhưng không kém phần hữu ích. Đó là phương thức load trong Jquery Ajax.
Vậy phương thức load có tác dụng gì? Phương thức load sẽ lấy dữ liệu trả về từ server, sau đó bỏ vào phần tử đã chọn.
Cú pháp
|
1 |
<code>$(selector).load(URL,data,callback);</code> |
Trong đó:
-
URL: Chỉ định URL mà bạn muốn lấy dữ liệu -
data: Cặpkey/valuegửi đi cùng với yêu cầu. -
callback: Tên của một hàm sẽ được thực thi sau khi hoàn tất phương thứcload().
Tham số callback chỉ định một hàm gọi lại để chạy khi phương thức load() hoàn tất. Hàm gọi lại có thể có các tham số khác nhau:
-
responseTxt: chứa nội dung kết quả nếu gọi thành công. -
statusTxt: chứa trạng thái của việc gọi. -
xhr: chứa đối tượng XMLHttpRequest.
Ví dụ về phương thức load trong jquery ajax
Ban đầu mình có file index.php với nội dung như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(<strong><em>document</em></strong>).ready(function(){ $("button").click(function(){ $("div.content").load("load.html", function(response, status, http){ if(status == "success") alert("Nội dung của file load.html đã được tải hoàn tất!"); if(status == "error") alert("Error: " + http.status + ": " + http.statusText); }); }); }); </script> </head> <body> <div class="content"> Nội dung trước khi thực hiện phương thức load. </div> <button>Load nội dung vào thẻ div bên trên</button> </body> </html> |
Tạo 1 file load.html với nội dung sau:
|
1 |
<p>Đây là nội dung của file load.html</p> |
Sau đó chạy file index.php ta sẽ được kết quả như sau:
Sau khi nhấn button để thực hiện phương thức load:
Tham khảo: https://api.jquery.com/load/