内容目录
load()
函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容。
load()
函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式。
load()
函数只会替换每个匹配元素的内部内容(innerHTML)。
你还可以在URL字符串后面追加指定的选择器(与URL之间用空格隔开),以便于只使用加载的html文档中匹配选择器的部分内容来替换当前匹配元素的内容。如果该文档没有匹配选择器的内容,就使用空字符串("")来替换当前匹配元素的内容。
如果当前jQuery对象没有匹配任何元素,则不会执行远程加载请求。
这里介绍的load()
是一个Ajax请求函数,jQuery中还有一个同名的事件函数load(),用于在文档加载完成时执行指定的函数。
该函数属于jQuery
对象(实例)。该函数在底层是基于函数jQuery.ajax()实现的。
语法
jQueryObject.load( url [, data ] [, complete ] )
参数
参数 | 描述 |
---|---|
url | String类型请求的目标URL字符串。 |
data | 可选/String/Object类型发送请求传递的数据。 |
complete | 可选/Function类型请求完成(无论成功或失败)后执行的回调函数。它有3个参数:其一是请求返回的文本内容,其二是请求状态文本("success"、 "notmodified"、 "error"、 "timeout"、 "abort"或"parsererror"),其三是当前jqXHR对象。 |
如果参数data
为Object对象,jQuery会自动将其转换为字符串。属性名就是对应的请求参数名,属性值就是参数值,如果属性值为数组,jQuery会自动将其拆分为参数名相同、每个元素作为参数值的请求参数。
返回值
load()
函数的返回值为jQuery类型,返回当前jQuery对象本身。
示例&说明
请参考以下这段HTML示例代码:
<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">https://codeplayer.vip</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("加载成功!");
}
});
0 条评论
撰写评论