一、jquery操作ajax
1、jquery的方法
jQuery 对 Ajax 做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容性。对于封装的方式, jQuery 采用了三层封装:
最底层的封装方法为:$.ajax()
而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),
最高层是$.getScript()和$.getJSON()方法。
2、底层
$.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。JQuery封装的底层Ajax操作函数,更加侧重于定制化选项,让开发人员控制的细节方面更加精确。
$.ajax({
url:请求路径,
type:“请求方式”,
dataType:"服务器返回的数据类型",
data:{"name":value,} , //提交的数据
success:function(res,status,xhr){ //请求成功调用的函数
res //请求成功结果
},
error:function(){}//请求失败调用的函数
})
$.ajax({
url:请求路径,
type:“请求方式”,
dataType:"服务器返回的数据类型",
data:{"name":value,} , //提交的数据
}).then(function(res){})
$.ajax({
url:请求路径,
type:“请求方式”,
dataType:"服务器返回的数据类型",
data:{"name":value,} , //提交的数据
}).done(function(res){}).fail(function(){})
$.ajax({
url:请求路径,
type:“请求方式”,
dataType:"服务器返回的数据类型",
data:{"name":value,} , //提交的数据
}).always(function(res){})
3、第二层
load(参数1,参数2,参数3)
$.post(url,[data],[callback],[type])
$.get(url,[data],[callback],[type])url: 必需 待载入页面的URL地址
data: 可选 待发送 Key/value 参数。
callback: 可选 载入成功时回调函数。
type: 可选 返回内容格式,xml, html, script, json, text, _default。
$(".box").load("./model/1.html ul", function (res, status, xhr) {
// console.log(res);
// console.log(status); //状态码对应的字符串
console.log(xhr); //XMLHttpRequest对象
console.log(xhr.status); //XMLHttpRequest对象
});
$.get(
"./php/checkUser.php",
{ nickname: val },
function (res) {
console.log(res);
},
"text"
);
$.ajax({
url: "./php/checkUser.php",
type: "post",
data: { nickname: v },
dataType: "text",
success: function (res) {
console.log(res);
},
});
4、第三层
$.getScript(url,callback)
$.getJSON(url,[data],callback)
url参数为请求加载json格式文件的服务器地址,
可选项data参数为请求时发送的数据,
callback参数为数据请求成功后,执行的回调函数