.load() : 从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中。 - jQuery API 中文文档

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

近视的人字拖 · 《支持首店经济发展若干措施》的政策解读 - ...· 1 月前 ·

温文尔雅的烤面包 · 华为发布四无生态型摄像机相关概念板块表现强势· 2 月前 ·

健壮的墨镜 · java根据BufferedImage获取图 ...· 2 月前 ·

文雅的移动电源 · 为什么Techno音乐和《黑客帝国》是绝配？ ...· 3 月前 ·

睿智的火柴 · 2017年爆米花棒球聯盟 - 台灣棒球維基館· 3 月前 ·

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

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

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

类型: String

一个包含发送请求的URL字符串

类型: PlainObject, String

向服务器发送请求的Key/value参数，例如{name:"",age:23}

complete(responseText, textStatus, XMLHttpRequest)

类型: Function ()

当请求成功后执行的回调函数。

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

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

Callback Function

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


     this

始终指向当前正在处理的 DOM 元素。

Loading Page Fragments（加载页面片段）

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

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

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

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

Script Execution（脚本执行）

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

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

<!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>

<!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>