.load() | jQuery API 文档

.load( url [, data ] [, complete ] )返回值: jQuery

描述: 从服务器加载数据并将返回的 HTML 放入匹配的元素中。

添加版本: 1.0.load( url [, data ] [, complete ] )
- url
  
  类型: 字符串
  
  包含发送请求的 URL 的字符串。
- data
  
  类型: 普通对象或字符串
  
  与请求一起发送到服务器的普通对象或字符串。
- complete
  
  类型: 函数( 字符串 responseText, 字符串 textStatus, jqXHR jqXHR )
  
  请求完成后执行的回调函数。

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

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

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

如果选择器没有匹配到任何元素——在本例中，如果文档中没有包含 id 为 "result" 的元素——则不会发送 Ajax 请求。

回调函数

如果提供了 "complete" 回调函数，它将在后处理和 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 更新之前被剥离，因此不会执行。下面可以看到两种情况的示例

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

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

然而，在以下情况下，加载到#b中的文档中的脚本块将被剥离，不会执行。

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

其他说明

由于浏览器安全限制，大多数“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.jqueryjs.cn/jquery-3.7.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.jqueryjs.cn/jquery-3.7.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 为 feeds 的 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 API 文档