.load()

类别：Ajax > 简写方法

.load( url [, data ] [, complete ] )返回类型：jQuery

描述：从服务器载入数据，并把返回的HTML放置到匹配的元素中。

注意：在jQuery 3.0以前，事件处理套装也有一个方法，命名为.load()。jQuery的旧版本根据传递给它的参数的集合来确定引发哪个方法。

此方法是从服务器取回数据的最简单方式。它大致等同于$.get(url, data, success)，除了它是一个方法，而不是一个全局函数，它具有隐式回调函数。当侦测到一个成功的响应时（亦即，当textStatus是“success”或“notmodified”时），.load()把匹配的元素的内容设置为返回的数据。这意味着此方法的大多数用法都非常简单：

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

如果选择器没有匹配到元素——在这种情况下，如果文档没有包含带有id="result"的元素，就不会发送Ajax请求。

回调函数

如果提供了一个complete回调函数，会在处理之后执行，此时HTML插入已经实施了。此回调函数对jQuery集合中的每个元素引发一次，this依次被设置为每个DOM元素。

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

在上面两个示例中，如果当前文档并不包含一个带有id="result"的元素，就不会执行.load()方法。

请求方法

如果提供了作为对象的data，就用POST方法；否则，就假定是GET方法。

载入Page片断

.load()方法与$.get()方法不同，它允许我们指定远程文档要被插入的部分。这可以通过针对url参数的特殊语法来实现。如果字符串中包含了一个或多个空白，跟在第一个空白之后的第字符串的部分被假定为一介jQuery选择器，确定要被载入的内容。

我们可以修改上面的示例，只使用所取得的文档的一部分：

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

当执行此方法时，它检索到了ajax/test.html的内容，但是然后jQuery解析了返回的文档，找到带有id="container"的元素。此元素，随同它的内容，被插入到带有id="result"的元素中，检索文档的剩余部分则被弃用了。

jQuery使用浏览器的.innerHTML属性来解析检索到的无疑，把它插入到当前文档。在此处理过程中，浏览器经常筛选来自文档的元素，譬如<html>、<title>或<head>元素。结果是，由.load()检索到的元素可能并不恰好与被浏览器直接检索到的文档相同。

脚本执行

在调用.load()使用不带后缀选择器表达式的URL时，内容传递给.html()之前脚本已经被删除了。脚本块在被丢弃之前执行。然而，如果调用.load()使用URL后面带有选择器表达式，在DOM被更新之前脚本就被剥离了。下面可以看到两种情况的示例：

这里，任何载入到#a里面，作为文档一部分的JavaScript脚本，都会成功地执行。

1
 
$( "#a" ).load( "article.html" );

然而，在下面的情况里，在文档中载入到#b中的脚本块将被拦出，不会执行：

1
 
$( "#b" ).load( "article.html #target" );

补充说明：

  • 由于浏览器安全限制，大多数“Ajax”请求服从同源策略，从不同的域名、子域名、端口或协议检索请求可能不会成功。

示例：

把另一个网页的列表项载入到有序列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Projects:</b>
<ol id="new-projects"></ol>
 
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
 
</body>
</html>

演示：

如果Ajax请求遇到了一个错误就显示一个通知。

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
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
 
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>
 
</body>
</html>

演示：

把feeds.html文件载入到带有id="feeds"的<div>。

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

输出结果：

1
 
<div id="feeds"><b>45</b> feeds found.</div>

把数据数据传递给服务器。

1
 
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

和上面一样，但是将用POST方法把额外的参数发送到服务器，当服务器完成响应时执行一个回调函数。

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