您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年09月08日 15:19

原创 jQuery.load() AJAX函数详解

3771 次浏览 读完需要≈ 8 分钟

内容目录

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("加载成功!");
	}
});
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单