Phương thức load() AJAX của jQuery

Phương thức load() của jQuery

Phương thức load() của jQuery là phương thức AJAX đơn giản nhưng mạnh mẽ.

Phương thức load() tải dữ liệu từ máy chủ và đặt dữ liệu trả về vào phần tử được chọn.

Ngữ pháp:

$("}}selector).load(URL,data,callback);

Bắt buộc URL Tham số xác định URL mà bạn muốn tải.

Tùy chọn data Tham số xác định bộ sưu tập các cặp khóa/giá trị chuỗi được gửi cùng với yêu cầu.

Tùy chọn callback Tham số là tên hàm sẽ được thực thi sau khi phương pháp load() hoàn thành.

Dưới đây là nội dung của tệp mẫu ("demo_test.txt"):

<h2>jQuery và AJAX là FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

Ví dụ dưới đây sẽ tải nội dung của tệp "demo_test.txt" vào phần tử <div> đã chỉ định:

Ví dụ

$("#div1").load("demo_test.txt");

thử nghiệm trực tiếp

Bạn cũng có thể thêm bộ lọc jQuery vào các tham số URL.

Ví dụ dưới đây sẽ tải nội dung của phần tử có id="p1" trong tệp "demo_test.txt" vào phần tử <div> đã chỉ định:

Ví dụ

$("#div1").load("demo_test.txt #p1");

thử nghiệm trực tiếp

Tham số callback tùy chọn xác định hàm hồi gọi sẽ được cho phép sau khi phương pháp load() hoàn thành. Hàm hồi gọi có thể thiết lập các tham số khác nhau:

  • responseTxt - Chứa nội dung kết quả khi gọi thành công
  • statusTXT - Chứa trạng thái được gọi
  • xhr - Chứa đối tượng XMLHttpRequest

Ví dụ dưới đây sẽ hiển thị một hộp thoại khi phương pháp load() hoàn thành. Nếu phương pháp load() thành công, sẽ hiển thị "Nội dung tải từ bên ngoài thành công!" và nếu thất bại, sẽ hiển thị thông báo lỗi:

Ví dụ

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Nội dung tải từ bên ngoài thành công!");
    if(statusTxt=="error")
      alert("Lỗi: "+xhr.status+": "+xhr.statusText);
  });
});

thử nghiệm trực tiếp

Hướng dẫn tham khảo jQuery AJAX

Nếu bạn cần tham khảo đầy đủ các phương pháp AJAX, hãy truy cập Hướng dẫn tham khảo jQuery AJAX。