Ajax的使用代码解析

2019-09-14 06:52:53王振洲

var sendData = {name:"zt",age:23};
var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

   为了方便使用JQ为我们封装好了一个ajax来方便我们的使用:

$.ajax({
 type:"post",//请求方式
 url:"url",//请求地址
 data:"...",//发送至服务端的数据
 contentType:"...",//设置发送数据的类型如果data是一个json字符串这里要设置为application/json
 success:function(data){...},//请求成功的回调函数data可看做是服务器返回的数据
 error:function(){...}//请求失败的回调函数
 });

  或者:

$.ajax({
 type:"post",
 url:"url",
 data:"...",
 contentType:"...",
 })
 .done(function(data){...})
 .fail(function(){...});

  回调函数中的data即为服务器返回的数据的一个代理,直接使用即可。

  为了简化我们的开发JQ提供了一些全局设置函数包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

  $.ajaxSetup()用来设置基本的参数例如:

$.ajaxSetup({
 type:"post",
 contentType:"application/json; charset=utf-8"
 });

  我们在使用$.ajax时可以直接这样设置:

 $.ajax({
 url:"",
 success:function(){...},
 error:function(){...}
 })

  最终等价于:

 $.ajax({
 type:"post",
 contentType:"application/json; charset=utf-8",
 url:"",
 success:function(){...},
 error:function(){...}
 })

  $().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用来设置一些全局回调函数的。例如我们在提交数据时为了防止多次提交我们需要在发送请求时产生一个loading遮罩在数据发送完成后取消遮罩,如果在每一次ajax请求时我们都设置一次就会很麻烦,此时我们就可以用全局回调函数来简化我们的操作:

  利用全局事件在请求开始时产生一个遮罩在请求完成时取消遮罩:

$(document).ajaxStart(function(){
 loadingMask.show();
 });
 $(document).ajaxComplete(function(){
 loadingMask.hide();
 });

以上所述是小编给大家介绍的Ajax的使用代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对易采站长站网站的支持!