Ajax的load方法(二)

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

load()是局部方法,必须需要一个包含元素的jquery对象作为前缀。

$.get()和$.post()是全局方法,无须指定某个元素。

对于用途而言,load适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,

$.get()和$.post()更加合适。

一、load方法简介

load方法的语法:

$(selector).load(url,data,function(response,status,xhr));

参数:

selector:得到的数据会加载到这个选择器对应的元素中(在status是success或notmodified的情况下)。如果当前文档不包含指定的元素,那么就不会执行.load()方法

url: 必需,规定要将请求发送到哪个url。

data:可选,规定连同请求发送到服务器的数据。如果提供的数据是对象,则使用POST方法,否则使用GET方法

function(response,xhr):可选,规定当得到数据完毕时(即执行post-processing之后)运行的函数。回调函数,可以使用load()得到的数据

回调函数可以设置的参数:

response - 包含来自请求的结果数据

status-包含请求的状态('success','notmodified','error','timeout','parsererror')。'success'和'notmodified'表示响应成功,如果响应成功,.load()将匹配元素的HTML内容设置为返回的数据。

xhr - 包含XMLHttpRequest对象


二、load方法的get和post的传递方式


 load()方法的传递方式根据参数data来自动指定。如果没有data参数,则默认采用GET方式传递;反之,则自动转换为POST方式。
//无参数传递,则是GET方式
$("#resText").load("test.html",function(){
//......
});//有参数传递,用问好追加到url后面,也是GET方式
$("#resText").load("test.html?name=zhangsan",function(){
//......
});
//有参数传递并且放到data部分,则是POST方式
$("#resText").load("test.html",{name:"zhangsan",age:"24"},function(){
//......
});

三、 回调函数

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

  对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有三个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,
jQuery代码如下:
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态:success、error、notmodified、timeout这4种
//XMLHttpRequest:XMLHttpRequest对象
});

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...