.load()

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

描述: 载入远程 HTML 文件代码并插入至 DOM 中。

  • version added: 1.0.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )

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

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

    complete(responseText, textStatus, XMLHttpRequest)当请求成功后执行的回调函数。

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

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

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

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

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

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

注意: 事件处理函数中也有一个方法叫 .load()。 哪一个被使用取决于传递的参数设置。

加载页面片段

.load() 方法, 不像 $.get(),允许我们指定远程文件被插入的部分。 他是一个特殊的 url 参数。 一个或多个空格字符被包括在这个 url 参数字符串中, 在这个字符串被第一空格划分jQuery选择内容将被载入。

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

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

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

举例:

例子: Load the main page's footer navigation into an ordered list.

<!DOCTYPE html>
<html>
<head>
  <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
	
<b>Footer navigation:</b>
<ol id="new-nav"></ol>

<script>
  $("#new-nav").load("/ #jq-footerNavigation li");
</script>
</body>
</html>

Demo:

例子: 显示一个信息如果Ajax请求遭遇一个错误

<!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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:

例子: 将feeds.html 文件载人到 ID为feeds的DIV.

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

结果:

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

例子: 发送数组形式的data参数到服务器。

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

例子: 同上, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery 1.6 API 中文版Clove整理、修订