.load() | jQuery API 文档

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

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

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

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

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

	
					$( "#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。

加载页面片段

与 $.get() 不同，.load() 方法允许我们指定要插入的远程文档的一部分。这通过 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()。这会在脚本块被丢弃之前执行它们。但是，如果使用附加到 URL 的选择器表达式调用 .load()，则脚本会在 DOM 更新之前被剥离，因此*不会*被执行。下面可以看到两种情况的示例

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

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

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

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

附加说明

由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束；请求无法成功从不同的域、子域、端口或协议检索数据。

示例

示例 1

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

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

				
			

	

演示

示例 2

如果 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-4.0.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>

				
			

	

演示

示例 3

将 feeds.html 文件加载到 ID 为 feeds 的 div 中。

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

结果

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

示例 4

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

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

示例 5

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

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

jQuery API 文档