当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .load()用法及代码示例


用法 
.load( url [, data ] [, complete ] ) => jQuery

说明：从服务器加载数据并将返回的 HTML 放入匹配的元素中。

  • 添加的版本：1.0.load( url [, data ] [, complete ] )

    • url
      类型：String
      包含请求发送到的 URL 的字符串。
    • data
      类型：PlainObject 或 String
      与请求一起发送到服务器的普通对象或字符串。
    • complete
      类型：Function(String responseText，String textStatus，jqXHRjqXHR)
      请求完成时执行的回调函数。

注意：在 jQuery 3.0 之前，事件处理套件还有一个名为 .load() 的方法。旧版本的 jQuery 根据传递给它的参数集确定要触发的方法。

此方法是从服务器获取数据的最简单方法。它大致相当于$.get(url, data, success)，只是它是一个方法而不是全局函数，并且它有一个隐式回调函数。当检测到成功响应时(即当textStatus 为"success" 或"notmodified" 时)，.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数用途都非常简单：

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

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

回调函数

如果提供了"complete" 回调，则会在post-processing 并执行 HTML 插入之后执行。回调为 jQuery 集合中的每个元素触发一次，并且 this 依次设置为每个 DOM 元素。

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

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

请求方法

如果数据作为对象提供，则使用 POST 方法；否则，假定为 GET。

加载页面片段

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

我们可以修改上面的示例以仅使用获取的文档的一部分：

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

当此方法执行时，它会检索 ajax/test.html 的内容，但随后 jQuery 会解析返回的文档以找到 ID 为 container 的元素。该元素及其内容被插入到 ID 为 result 的元素中，其余检索到的文档将被丢弃。

jQuery 使用浏览器的.innerHTML 属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会从文档中过滤元素，例如 <html> 、 <title> 或 <head> 元素。因此，.load() 检索到的元素可能与浏览器直接检索到的文档不完全相同。

脚本执行

使用不带后缀选择器表达式的 URL 调用 .load() 时，内容会在删除脚本之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，因此会执行 not。两种情况的示例如下所示：

在这里，作为文档的一部分加载到#a 中的任何 JavaScript 都将成功执行。

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

但是，在以下情况下，正在加载到 #b 的文档中的脚本块将被剥离并且不被执行：

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

其他注意事项：

  • 由于浏览器安全限制，大多数 "Ajax" 请求都受制于 same origin policy ；请求无法从不同的域、子域、端口或协议成功检索数据。

例子：

将另一个页面的列表项加载到有序列表中。

<!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-3.5.0.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 请求遇到错误，则显示通知。

<!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-3.5.0.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 的 div 中。

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

结果：

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

将数据数组传递给服务器。

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

与上面相同，但会将附加参数 POST 到服务器，并在服务器完成响应时执行回调。

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

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .load()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。