jQuery ajax - load() 方法

实例

使用 AJAX 请求来改变 div 元素的文本：

  1. $("button").click(function(){
  2.   $("div").load('demo_ajax_load.txt');
  3. });

您可以在页面底部找到更多实例

定义和用法

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

注释：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。

语法

  1. load(url,data,function(response,status,xhr))
参数 描述
url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr) 可选。规定当请求完成时运行的函数。 额外的参数： - response - 包含来自请求的结果数据 - status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） - xhr - 包含 XMLHttpRequest 对象

详细说明

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 "success" 或 "notmodified" 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单：

  1. $("#result").load("ajax/test.html");

如果提供回调函数，则会在执行 post-processing 之后执行该函数：

  1. $("#result").load("ajax/test.html", function() {
  2.   alert("Load was performed.");
  3. });

上面的两个例子中，如果当前文档不包含 "result" ID，则不会执行 .load() 方法。

如果提供的数据是对象，则使用 POST 方法；否则使用 GET 方法。

加载页面片段

.load() 方法，与 $.get() 不同，允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

我们可以修改上面的例子，这样就可以使用所获得文档的某部分：

  1. $("#result").load("ajax/test.html #container");

如果执行该方法，则会取回 ajax/test.html 的内容，不过然后，jQuery 会解析被返回的文档，来查找带有容器 ID 的元素。该元素，连同其内容，会被插入带有结果 ID 的元素中，所取回文档的其余部分会被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如 <html>, <title> 或 <head> 元素。结果是，由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

更多实例

例子 1

加载 feeds.html 文件内容：

  1. $("#feeds").load("feeds.html");

例子 2

与上面的实例类似，但是以 POST 形式发送附加参数并在成功时显示信息：

  1. $("#feeds").load("feeds.php", {limit: 25}, function(){
  2.   alert("The last 25 entries in the feed have been loaded");
  3. });

例子 3

加载文章侧边栏导航部分至一个无序列表：

HTML 代码：

  1. <b>jQuery Links:</b>
  2. <ul id="links"></ul>

jQuery 代码：

  1. $("#links").load("/Main_Page #p-Getting-Started li");

更多实例

生成 AJAX 请求，并通过该请求发送数据

如何使用 data 参数通过 AJAX 请求来发送数据。（本例在 AJAX 教程中解释过。） 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("input").keyup(function(){
  7.     txt=$("input").val();
  8.     $("span").load("/jquery/gethint.asp",{suggest:txt});
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  14. <p>请在下面的输入框中输入名字（a 到 z 的字符）：</p>
  15. 名字：<input type="text" />
  16. <p>建议：<span></span></p>
  17. <p>注释：我们在 <a href="/ajax/ajax_asp_php.asp" target="_blank">AJAX 教程</a> 中讲解过本例中使用的文件（gethint.asp）。</p>
  18. </body>
  19. </html>

生成 AJAX 请求，并使用回调函数

如何使用 function 参数处理来自 AJAX 请求的数据结果。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("div").load("/example/xmle/cd_catalog.xml",function(response,status){
  8.       if (status=="success")
  9.       {
  10.       $("div").html("<ol></ol>");
  11.       $(response).find("artist").each(function(){
  12.         var item_text = $(this).text();
  13.         $('<li></li>').html(item_text).appendTo('ol');
  14.         });
  15.       alert("There are "+$(response).find("cd").size()+" CDs")
  16.       }
  17.     });
  18.   });
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <p>Artists</p>
  24. <div></div>
  25. <button>获得 CD 信息</button>
  26. <p>本例中使用的 XML 文件是 <a href="/example/xmle/cd_catalog.xml" target="_blank">cd_catalog</a></p>
  27. </body>
  28. </html>

生成带有错误的 AJAX 请求

如何使用 function 参数来处理 AJAX 请求中的错误（使用 XMLHttpRequest 参数）。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("div").load("wrongname.xml",function(response,status,xhr){
  8.       if (status=="success")
  9.       {
  10.       $("div").html("<ol></ol>");
  11.       $(response).find("artist").each(function(){
  12.         var item_text = $(this).text();
  13.         $('<li></li>').html(item_text).appendTo('ol');
  14.         });
  15.       }
  16.       else
  17.       {
  18.       $("div").html("An error occured: <br/>" + xhr.status + " " + xhr.statusText)
  19.       }
  20.     });
  21.   });
  22. });
  23. </script>
  24. </head>
  25. <body>
  26. <p>Artists</p>
  27. <div></div>
  28. <button>获得 CD 信息</button>
  29. <p>本例中使用的 XML 文件是 <a href="/example/xmle/cd_catalog.xml" target="_blank">cd_catalog</a></p>
  30. </body>
  31. </html>