# .load()

所属分类：Ajax > 快捷方法 英文文档：.load()

## .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )返回: jQuery

描述: 从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。

- #### 添加的版本: 1.0.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

  - url
    类型: String
    一个包含发送请求的URL字符串
  - data
    类型: PlainObject, String
    向服务器发送请求的Key/value参数，例如{name:"",age:23}
  - complete(responseText, textStatus, XMLHttpRequest)
    类型: Function()
    当请求成功后执行的回调函数。

> 注意: 事件处理函数中也有一个方法叫 `.load()`。 jQuery根据传递给它的参数设置来确定使用哪个方法执行。

这个方法是从服务器获取数据最简单的方法。除了不是全局函数，这个方法和`$.get(url, data, success)` 基本相同，它有一个隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 `textStatus`是 "success" 或者 "notmodified")时，`.load()` 方法将返回的HTML 内容数据设置到相匹配的节点中。这就意味着大多数采用这个方法可以很简单:

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

如果选择器没有匹配的元素——在这种情况下，如果document不包含id = "result" 的元素- 这个Ajax请求将不会被发送出去。

如果提供回调,都将在执行后进行后处理:

#### Callback Function

如果提供了 "complete" 回调函数，它将在函数处理完之后，并且 HTML 已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次，并且 `this`始终指向当前正在处理的 DOM 元素。

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

在上文的两个例子中, 如果当前的文件不包含ID为“result”的元素，那么`.load()`方法将不被执行。

#### Request Method（请求方法）

默认使用 GET 方式 ， 如果data参数提供一个对象，那么使用 POST 方式。

#### Loading Page Fragments（加载页面片段）

`.load()` 方法, 不像 `$.get()`那样，允许我们使用在 `url` 中添加特定参数的特殊语法，来实现可以指定要插入哪一部分远程文档。如果 `url` 参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是 jQuery 的选择器，从而决定应该加载返回结果中的哪部分内容。（译者注：第一个空格后面是一个jQuery选择器，返回的内容中匹配改选择器的内容将被载人到页面中。）

我们可以修改上述例子中,只有#container的一部分被载人到文件中：

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

当这种方法执行, 它将检索 `ajax/test.html` 返回的页面内容，jQuery会获取ID为 `container` 元素的内容，并且插入到ID为 `result` 元素，而其他未被检索到的元素将被废弃。

jQuery使用浏览器的`.innerHTML`属性去解析检索到的文档，并将其插入到当前文档中。在此过程中，浏览器通常会过滤文档中的一些元素 ，比如`<html>`, `<title>`, 或者 `<head>` 元素。其结果是，由`.load()`方法返回的元素与从浏览器中直接获取到的文档内容，可能是并不完全一样的。

#### Script Execution（脚本执行）

当使用URL参数中没有后面跟选择器表达式时， 那么传递给 `.html()` 的返回内容中，是含有脚本的。在它们被丢弃之前，脚本是会被执行的。但如果调用 `.load()`时，即使在 url 参数中添加了选择器表达式，但在 DOM 被更新之前，脚本会被删除。因此脚本不会被执行。下面的例子分别演示了这两种情况：

任何加载到 `#a` 中的 JavaScript 脚本，将会作为文档的一部分而被执行。

1 |
    $('#a').load('article.html');

然而，在以下情况下，脚本块将从被加载到`#b`的document中被剥离出来，而不执行：

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

### Additional Notes:（其他注意事项：）

- 由于浏览器的安全限制，大多数“Ajax”的要求，均采用同源的政策 ;该请求不能成功地检索来自不同的域，子域或协议的数据。

## 例子:

#### Example: 在一个有序列表中，加载主页的页脚导航。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
    <!DOCTYPE html><html><head>  <style> body{ font-size: 12px; font-family: Arial; } </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body> <b>Footer navigation:</b><ol id="new-nav"></ol> <script>  $("#new-nav").load("/ #jq-footerNavigation li");</script> </body></html>

#### Demo:

#### Example: 显示一个信息如果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 |
    <!DOCTYPE html><html><head>  <style>  body{ font-size: 12px; font-family: Arial; }  </style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 将feeds.html 文件载人到 ID为feeds的DIV.

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

#### Result:

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

#### Example: 发送数组形式的data参数到服务器。

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

#### Example: Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

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