phương pháp load() của jQuery ajax
ví dụ
sử dụng yêu cầu AJAX để thay đổi văn bản của phần tử div:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
định nghĩa và cách sử dụng
phương pháp load() thông qua yêu cầu AJAX từ máy chủ để tải dữ liệu và đặt dữ liệu trả về vào phần tử được chỉ định.
Ghi chú:còn có một tên gọi load của jQuery sự kiệnphương pháp. Điều nào được gọi phụ thuộc vào tham số.
cú pháp
load(url,data,function(response,status,xhr))
| tham số | mô tả |
|---|---|
| url | Quy định URL nào sẽ gửi yêu cầu. |
| data | Tùy chọn. Quy định dữ liệu sẽ được gửi đến máy chủ cùng với yêu cầu. |
| function(response, status, xhr) |
Tùy chọn. Quy định hàm sẽ được thực hiện khi yêu cầu hoàn thành. Tham số bổ sung:
|
Giải thích chi tiết
Phương pháp này là phương pháp đơn giản nhất để lấy dữ liệu từ máy chủ. Nó gần như tương đương với $.get(url, data, success), khác biệt là nó không phải là hàm toàn cục và nó có hàm hồi gọi ẩn. Khi phát hiện phản hồi thành công (ví dụ, khi textStatus là "success" hoặc "notmodified"), .load() sẽ thiết lập nội dung HTML của yếu tố được khớp bằng dữ liệu trả về. Điều này có nghĩa là hầu hết các sử dụng của phương pháp này sẽ rất đơn giản:
$("#result").load("ajax/test.html");
Nếu cung cấp hàm hồi gọi, hàm đó sẽ được thực hiện sau khi hoàn thành việc xử lý sau khi thực hiện:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
Trong hai ví dụ trên, nếu tài liệu hiện tại không chứa ID "result", phương pháp .load() sẽ không được thực hiện.
Nếu dữ liệu cung cấp là đối tượng, thì sử dụng phương pháp POST; nếu không, sử dụng phương pháp GET.
Tải đoạn trang
Phương pháp .load(), khác với $.get(), cho phép chúng ta quy định phần nào đó của tài liệu từ xa cần chèn. Điều này được thực hiện thông qua ngữ pháp đặc biệt của tham số url. Nếu chuỗi này chứa một hoặc nhiều khoảng trống, chuỗi tiếp theo sau khoảng trống đầu tiên là điều quyết định nội dung được tải bằng jQuery chọn lọc.
Chúng ta có thể sửa đổi ví dụ trên để có thể sử dụng phần nào đó của tài liệu được lấy lại:
$("#result").load("ajax/test.html #container");
Nếu thực hiện phương pháp này, nó sẽ lấy lại nội dung của ajax/test.html, nhưng sau đó, jQuery sẽ phân tích tài liệu được trả về để tìm các yếu tố có ID hộp. Yếu tố này, cùng với nội dung của nó, sẽ được chèn vào yếu tố có ID kết quả, phần còn lại của tài liệu được lấy lại sẽ bị bỏ qua.
jQuery sử dụng thuộc tính .innerHTML của trình duyệt để phân tích tài liệu được lấy lại và chèn vào tài liệu hiện tại. Trong quá trình này, trình duyệt thường lọc bỏ các yếu tố như <html>, <title> hoặc <head>元素. Kết quả là, các yếu tố được lấy lại bởi .load() có thể không hoàn toàn giống với tài liệu được trình duyệt lấy trực tiếp.
Ghi chú:Do các hạn chế về an toàn của trình duyệt, hầu hết các yêu cầu "Ajax" tuân thủ chính sách nguồn gốc; yêu cầu không thể thành công trong việc lấy dữ liệu từ các域 khác nhau, subdomain hoặc giao thức.
Thêm nhiều ví dụ
Ví dụ 1
Tải nội dung tệp feeds.html:
$("#feeds").load("feeds.html");
Ví dụ 2
Tương tự ví dụ trên nhưng gửi các tham số phụ trợ dưới dạng POST và hiển thị thông báo khi thành công:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("25 mục cuối cùng trong nguồn đã được tải");
});
Ví dụ 3
Tải phần hướng dẫn bên cạnh bài viết vào một danh sách không có dấu phẩy.
Mã HTML:
<b>jQuery Links:</b> <ul id="links"></ul>
Mã jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Thêm nhiều ví dụ TIY
- Tạo yêu cầu AJAX và gửi dữ liệu qua yêu cầu này
- Cách sử dụng tham số data để gửi dữ liệu qua yêu cầu AJAX. (Ví dụ này đã được giải thích trong bài học AJAX.).
- Tạo yêu cầu AJAX và sử dụng hàm回调
- Cách sử dụng tham số function để xử lý kết quả dữ liệu từ yêu cầu AJAX.
- Tạo yêu cầu AJAX có lỗi
- Cách sử dụng tham số function để xử lý lỗi trong yêu cầu AJAX (sử dụng tham số XMLHttpRequest).
