.load()

最新推荐文章于 2021-10-16 09:28:01 发布

原创最新推荐文章于 2021-10-16 09:28:01 发布 · 409 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

jQuery Ajax 专栏收录该内容

8 篇文章

订阅专栏

Description: Load data from the server and place the returned HTML into the matched element.version added: 1.0
描述：从服务器端加载数据，然后将返回的html内容代替到匹配的元素。起始版本1.0

[b].load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )[/b]
[b]url[/b] A string containing the URL to which the request is sent.
url：一个包含发送请求URL地址的字符串。
[b]data[/b] A map or string that is sent to the server with the request.
data：伴随请求发送到服务器端的Map或者字符串。
[b]complete(responseText, textStatus, XMLHttpRequest)[/b] A callback function that is executed when the request completes.
complete(responseText, textStatus, XMLHttpRequest)：请求完成后被执行的回调函数。

Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.
注意：在事件处理中也有一个叫.load()的方法，jQuery会根据方法中的参数集决定触发哪个.load()方法。

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:
该方法是从服务器端获取数据最简单的方式。.load()仅仅是一个方法而不是一个全局函数而且它包含了一个隐式函数，除了以上两点区别外，.load()和$.get(url, data, success)的作用几乎是一样的。当一个请求成功响应（例如textStatus为"success"或者"notmodified"）时，.load()会将返回的Html数据替换到匹配的元素上。这意味着该方法的大多数使用可以很简单：
$('#result').load('ajax/test.html');

[b]Callback Function
回调函数：[/b]
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
如果提供了一个“complete”函数，它将在post处理和html插入完成后被执行。在jQuery集合中的每个元素会触发一次该回调函数，并且它将被依次地设置到DOM的每个元素中。

$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
In the two examples above, if the current document does not contain an element with an ID of "result," the .load() method is not executed.
在以上两个例子中，如果当前文档中没有一个ID为“result”的元素，.load()方法将不会被执行。

[b]Request Method[/b]
[b]请求方式[/b]
The POST method is used if data is provided as an object; otherwise, GET is assumed.
当data是一个对象时将采用POST的方式，否则，默认采用GET方式。

[b]Loading Page Fragments[/b]
[b]加载页面片段[/b]
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
.load()方法不像$.get()那样可以指定仅插入远程文档中的一部分。但可以通过url参数中特定的语法获取。当一个或者多个空格包含url中，第一个空格后面的部分将会被当做一个需要加载哪些内容的jQuery选择器。

We could modify the example above to use only part of the document that is fetched:
我们可以修改下上面的例子，只使用获取的文档中的#container部分。
$('#result').load('ajax/test.html #container');

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
当该方法执行时，它会从ajax/test.html中获取内容，但是jQuery会解析返回的内容并且找到ID为container的元素，并将它插入到ID为result的元素中，剩余的部分将会被废弃掉。

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
jQuery会使用浏览器的.innerHtml属性解析获取到的文档然后将其插入到当前的文档中。在这个处理过程中，浏览器经常会从该文档中过滤掉<html>,<title>，<head>这些元素。因此使用.load()获取到的元素和使用浏览器直接获取到的文档元素可能不完全一样。

[b]Script Execution[/b]
[b]脚本运行[/b]
When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:
当调用.load()方法中URL参数没有后缀的选择器表达式时，内容将在脚本被删除前传递给.html()方法，它们在被废弃之前就执行了脚本块。如果.load()方法中URL参数待用后缀的选择器表达式，那么脚本将在DOM更新前被废弃，它将不会被执行。这两种情况的例子如下：

Here, any JavaScript loaded into #a as a part of the document will successfully execute.
被加载到#a的文档中的任何Javascript脚本将被成功执行。
$('#a').load('article.html');

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:
然而，在下面这种情况中，被加载到#b的文档中的脚本块将被废弃而不会被执行。
$('#b').load('article.html #target');

Additional Notes:
额外说明：
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
由于浏览器的安全性限制，大多数Ajax请求都遵守着同样的基本策略：不能从不同的域、子域、协议获取数据。

Examples:
Example: 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://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>
Demo:

Example: Display a notice if the Ajax request encounters an error.
例子：当ajax请求出错时显示一个通知。
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://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>
Demo:

Example: Load the feeds.html file into the div with the ID of feeds.
例子：加载feeds.html文件到ID为feeds的div。
$("#feeds").load("feeds.html");
Result:
结果：
<div id="feeds"><b>45</b> feeds found.</div>

Example: pass arrays of data to the server.
例子：发送数组形式的data参数到服务器。
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

Example: Same as above, 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");
});