vlambda博客
学习文章列表

load()函数用于从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容。

load()函数默认使用GET方式，如果提供了对象形式的数据，则自动转为POST方式。

load()函数只会替换每个匹配元素的内部内容(innerHTML)。

你还可以在URL字符串后面追加指定的选择器(与URL之间用空格隔开)，以便于只使用加载的html文档中匹配选择器的部分内容来替换当前匹配元素的内容。如果该文档没有匹配选择器的内容，就使用空字符串("")来替换当前匹配元素的内容。

如果当前jQuery对象没有匹配任何元素，则不会执行远程加载请求。

这里介绍的load()是一个Ajax请求函数，jQuery中还有一个同名的事件函数load()，用于在文档加载完成时执行指定的函数。

该函数属于jQuery对象(实例)。该函数在底层是基于函数jQuery.ajax()实现的。

语法

jQueryObject.load( url [, data ] [, complete ] )

参数

如果参数data为Object对象，jQuery会自动将其转换为字符串。属性名就是对应的请求参数名，属性值就是参数值，如果属性值为数组，jQuery会自动将其拆分为参数名相同、每个元素作为参数值的请求参数。

返回值

load()函数的返回值为jQuery类型，返回当前jQuery对象本身。

示例&说明

请参考以下这段HTML示例代码：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

使用以下jQuery代码，我们可以加载指定的html内容来替换每个匹配元素的内容(innerHTML)。

// 加载http://localhost/index.php的html内容来替换当前文档的每一个div元素
// jQuery会过滤掉该文档中的DOCTYPE以及html、head、body标签后再进行替换(以免与当前文档的标签起冲突)
$("div").load("http://localhost/index.php");



// 由于当前文档没有p元素，因此它什么也不做，既不会发送Ajax请求，也不会执行回调函数(如果有回调函数的话)
$("p").load("http://localhost/index.php");

加载指定的html文档数据，然后使用其中匹配选择器的元素内容来替换每个匹配元素的内容。

// 加载http://localhost/index.php?id=2的html内容
// 只使用其中id为site-title的元素来替换所有div元素
$("div").load("http://localhost/index.php?id=2 #site-title");

我们还可以为请求的URL传递额外的请求参数并在请求完成后执行相应的回调函数。

// 请分别执行以下三个加载方法

// 也可将URL直接写为："action.php?id=5&username=CodePlayer&age=15"
$("div").load("action.php?id=5", "username=CodePlayer&age=15");


// 由于数据是对象形式，因此自动转为POST方式
$("div").load("action.php?id=5", { username: "CodePlayer", age: 15 });


// 由于数据是对象形式，因此自动转为POST方式
// 注意：new String("username=CodePlayer&age=15") 也是一个Object对象，会使用POST方式
$("div").load("action.php?id=5", { username: "CodePlayer", age: 15 }, function(responseText, textStatus, jqXHR){
    // responseText 是响应(返回)的原始文本数据
    // textStatus 可能是 "success"、 "notmodified"、 "error"、 "timeout"、 "abort"或"parsererror"中的一个
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    if(textStatus == "success" || textStatus == "notmodified"){
        alert("加载成功!");
    }
});