首页 > js学习 > js基础知识 > jQuery中Ajax的局部方法load()
2016
12-16

jQuery中Ajax的局部方法load()

jQuery 对Ajax 做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容性。对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。

其中.load()是局部方法,其他为全局方法

.load()方法可以参数三个参数: url(必须, 请求 html文件的 url地址, 参数类型为String)、data(可选,发送的 key/value 数据,参数类型为Object)、callback(可选,成功或失败的回调函数,参数类型为函数 Function)。

<input type="button" value="异步获取数据" />

<div id="box"></div>

$('input').click(function () {$('#box').load('test.html');}); //异步获取test.html文件内容并添加到#box元素内

.load()前面必须有一个将要把获取内容添加到的元素。

如果想对载入的HTML 进行筛选,那么只要在 url参数后面跟着一个选择器即可(目前只支持class类的筛选)。

$('input').click(function () {$('#box').load('test.html .my');}); //获取到的内容中只把class类名为my的元素添加,其他过滤掉(url和class中间有一个空格)

一般ajax不仅需要载入数据,还需要向服务器提交数据,我们就可以使用第二个可选参数data(如果设置了该参数,传递方式为post,否则为get)。

$('input').click(function () {$('#box').load('test.php',{type:'post'});}); //用post方式传递参数

在Ajax数据载入完毕之后,就能执行回调函数callback,也就是第三个参数。回调函数也可以传递三个可选参数:responseText(请求返回)、textStatus(请求状态)、XMLHttpRequest(XMLHttpRequest对象)。

$('input').click(function () {$('#box').load('test.php', {url : 'ycku'}, function (response, status, xhr) {

alert('返回的内容为:' + response + ',状态为:' + status + '});

});

第一个参数是返回的内容,第二个参数是返回的加载状态,成功为"success",失败为"error"。第三个参数为一个对象,属于JavaScript范畴,可以调用一些属性如下:

responseText:作为响应主体被返回的内容

responseXML:如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的XML DOM 文档

status:响应的HTTP状态码

statusText:HTTP 状态的说明

其实第三个参数已经包含了第一个和第二个参数的内容,但是jQuery中为了方便把最常用的单独拿了出来。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。