jquery load回调封装_jQuery与Ajax：“特别的”load()方法（筛选文档、传递方法、回调函数）...

“大名鼎鼎的”jQuery因为其极简的引用方式而在N年前备受追捧，而今“浪潮”过去，还剩下什么？

我认识jQuery，只是在去年接触ajax时了解，从而感兴趣，进而深入探究(其实也没多深入，只是相关的看了一下)。不得不说，jQuery对ajax支持的四个type：post(一般用于发送)、get(一般常用于接收)、put(修改)、delete(删除) 令我非常震撼，太**实用了。

这其中，post和get是最常用的(因为好像说不是所有的浏览器都支持put和delete)，具体的我在 这篇文章 中以JS方式提到，这里不再赘述。

load()

load()方法时jQuery中操作上最为简单的Ajax方法，能载入其他的HTML代码并插入到DOM中。其基本格式为：

load(url [,data] [,callback])

参数意义：

url： String类型，请求HTML页面的URL地址

data(可选)： Object类型，发送至服务器的key/value数据

callback(可选)： Function，请求完成时的回调函数，无论请求成功或失败

为什么说它是“特别的”呢？因为它只用于文档流(html)的操作，而且，既可以是get操作，又可以是post操作：

基本示例：

//如果是jsp代码，这里要加一行：

//

请求的文件

张三：

沙发

李四：

板凳

王五：

地板

//如果是jsp代码，这里要加一行：

//

发送ajax的文件

//如果是jsp代码，上面这一行要换成：

$(function () {

$("#send").on("click", function () {

$("#resText").load("test.jsp");

});

});

已有评论：

上面是“载入文档”，它还可以“筛选载入的文档”：

如果只需要加载某页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为 URL参数 指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格：

$(function () {

$("#send").on("click", function () {

$("#resText").load("test.html .para");

});

});

传递方式：

load()方法的传递方式根据 参数data 来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式：

//无参数传递，GET方式

$("#resText").load("test.html .para", function(){

//....

});

//有参数传递，POST方式

$("#resText").load("test.html .para",{name:"tom", age:"18}, function(){

//....

});

回调函数：

对于必须在加载完成后才能继续的操作，load()方法提供了 回调函数 ，该函数 有3个参数 ，分别代表请求返回的内容、请求状态和XMLHttpRequest对象 ，jQuery代码如下：

$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){

//responseText：请求返回的内容——等同于js-ajax时的“得到服务器响应的文本格式的内容”(注意：js操作中的get、post...都在open()中规定)

//textStatus：请求状态：success、error、notmodified、timeout4种

//XMLHttpRequest：XMLHttpRequest对象——这玩意一般用在判断浏览器适用类型上

});

//注意：在load()方法中，无论Ajax请求是否成功，只要请求完成(complete)后，回调函数就被触发。

本文同步分享在 博客“行舟客”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。