在使用原生Ajax发送一个请求时,过程多少有点繁琐,jQuery中对于Ajax请求有它自己的封装好的函数,使用起来分方便。
在jQuery中有专门的Ajax封装,具体参照JQuery-Ajax参考手册网址
这里用一段练习代码展示下使用方法:
//使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script>
$.ajax({
url:"http://localhost:3000/users",
type:"get",
dataType:"json",
data:{"id":3},
beforeSend:function(xhr){
console.log("before send");
},
success:function(data){
console.log(data);
},
error:function(){
console.log("请求error");
},
complete:function(xhr){
console.log("complete");
console.log(xhr);
}
})
关于jQuery中$.ajax() 的几个参数介绍:
url:请求地址;
type:请求方法,默认为”get";
dataType:服务端响应数据类型;
contentType:请求体内容的类型,默认“application/x-www-form-urlencode”;
data:需要传输到服务器的数据,如果是get则通过、url传递;post则通过请求体传递;
timeout:请求超时时间;
beforeSend:请求发起之前触发;
success:请求成功之后触发(响应状态码200);
error:请求失败触发;
complete:请求完成后触发(不管成功与否)
jQuery中其他请求:
-
$.get(),获取数据
jQuery中get请求快捷方法:$.get(url,data,callback回调函数,返回的数据格式datatype);
//发送 get请求 $.get("http://localhost:3000/liuyan",{"content":"hi"}, function(data){ console.log(data); });
-
$.post,添加数据
$.post(url,data,callback)
//发送post请求 $.post(url,data,callback,datatype) $.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1}, function(data){ console.log(data); })
-
$.put,更改数据
//put 请求 $.ajax({ url:"http://localhost:3000/liuyan/5",//需要在地址上标出改的主键 type:"put", dataType:"json", data:{"content":"put 请求啊"},//改的内容 success:function(data){ console.log(data) } })
-
$delete,删除数据
//删除数据 delete请求 $.ajax({ url:"http://localhost:3000/liuyan/6", type:"delete", success:function(data){ console.log(data); } })
//删除数据 delete请求 $.ajax({ url:"http://localhost:3000/liuyan/6", type:"delete", success:function(data){ console.log(data); } })
-
$.ajaxSetup() 方法设置全局 AJAX 默认选项。
$.ajaxSetup({ url:"https://localhost:3000", type:post }); $.ajax({ data:{"name":"value"} });
等等还有很多方法,可以参考jquery-Ajax手册。