当前位置: 首页 > 中文手册 > jQuery.load() AJAX函数详解

jQuery.load() AJAX函数详解

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

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

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

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

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

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

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

语法

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

参数

参数描述
urlString类型请求的目标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">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("加载成功!");
	}
});
53 3
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。