ajax 局部替换元素,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').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中为了方便把最常用的单独拿了出来。

最后编辑：2019-12-13作者：qingheluo

这个作者貌似有点懒，什么都没有留下。