By GokiSoft.Com| 20:43 28/05/2020|
Tài Liệu JQuery

jQuery Load

jQuery load()

Phương thức load() đơn giản, nhưng rất mạnh mẽ.

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

Cú pháp:

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

Tham số URL chỉ định URL bạn muốn tải.

Tham số data chỉ định một bộ các cặp querystring key/value để gửi cùng request.

Tham số callback là tên của hàm sẽ được thực hiện sau khi phương thức load() hoàn thành.

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

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

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

Cũng có thể thêm jQuery selector vào tham số URL.

Ví dụ sau đây giống ví dụ trên nhưng chỉ tải nội dung các phần tử trong file mà có id="p1":

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

Tham số callback hay hàm callback sẽ chạy sau khi phương thức load() thực hiện xong. Hàm callback có thể có các tham số khác nhau:

  • responseTxt - chứa nội dung kết quả nếu cuộc gọi hàm thành công
  • statusTxt - chứa status cuộc gọi hàm
  • xhr - chứa đối tượng XMLHttpRequest

Ví dụ sau hiển thị alert box sau khi phương thức load() hoàn thành. Nếu phương thức load() đã thành công, nó sẽ hiển thị "External content loaded successfully!", và nếu thất bại, nó sẽ hiển thị một thông báo lỗi:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("External content loaded successfully!");
      if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>
Tags: