$.ajax()方法参数讲解

$.ajax()方法参数讲解

Introduce

一直在喊着 vue，react要代替jq了，可是项目中，还是会经常用到jq，尤其是h5经常会使用zepto，所以就把一直不熟悉的jq属性整理一下把

Detail

1. url

   最重要的当然是url， 这是你申请数据，请求接口最重要的路径。，要求是string类型

   url : 'index.html'

2. type

   在实际工作中，后台会把每一个接口支持的方法给你，比如 告诉你，这个接口用post，那个接口只能用get， 当然,默认的都是get，至于哪些少见的put，delete到目前按为止，我没见后台给我返回过

   type ： 'get/post.....'

3. timeout

   要求是number类型的参数， 设置请求超时的时间。当网络不通畅，后台返回比较慢的时候，超过了这个时间，就进入error中进行处理，例如

   var ajaxTimeoutTest = $.ajax({
   　　url:'',  //请求的URL
   　　timeout : 1000, //超时时间设置，单位毫秒
   　　type : 'get',  //请求方式，get或post
   　　data :{},  //请求所传参数，json格式
   　　dataType:'json',//返回的数据格式
   　　success:function(data){ //请求成功的回调函数
   　　　　alert("成功");
   　　},
   　　complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
   　　　　if(status=='timeout'){//超时,status还有success,error等值的情况
   　　　　　 ajaxTimeoutTest.abort();
   　　　　　  alert("超时");
   　　　　}
   　　}
   })
   

   解决方案

   1. timeout设为0，永不超时，当然，默认就是0。
   2. timeout设置的大一点。
   3. 在error中设置回调函数，在超时的情况下，再次请求

4. async

   要求是boolean类型的参数，默认是true，也就是异步请求，当设置为false，也就是同步请求时，所有的操作必须等待上一个请求完成才可以继续，大大降低了用户用好性

   async : 'true/false'

5. data

   请求数据时传入的参数，有些人喜欢在url中直接字符串拼接所有的参数，有些人就喜欢用data来设置，下面分别代码举例

   //参数写入url中
   url : 'index.html?a=1&b=2&c=3'

   //参数写入data中
   url : 'index.html',
   data : {
    a :1,
    b :2,
    c :3
   }

6. cache

   类型时boolean的参数，默认时true，设置为false的时候，当我第一次请求结束之后，如果再次请求，直接从缓存里读取，而不是从服务器端读取，节约了点时间，我一般时不设置的，，因为现在从服务器读数据时非常快的

7. datatype

   类型时string的参数，也就是我预期服务器给我返回的数据类型，虽然现在一般返回的都是json，但是有些时候返回的数据和设想的并不太一样，所以这个属性还是有学习的必要的

   1. xml。返回一个xml文档，
   2. html
   3. json
   4. jsonp （这个属性是为了解决跨域问题，我记得在我之前的博客里转载过关于jsonp的文档）
   5. text

8. beforesend

   类型是函数的参数，发送请求前可以修改xmlhttprequest对象的函数，如果添加一些属性，当然会也可以设置false取消这次接口调用

9. complete

   参数是函数的参数，也就是在请求完成时调用的函数，其实就是把原生的js封装，当200且状态为4的时候

10. error同上

11. 其余的感觉用处不大，下面写个实例

Code

$.ajax({
        type: 'POST',
        url: baseUrl + '/apply-policy/ths_za_0006?token=' + token,
        data: {
          applicant: {
            name: form.name.value,
            idno: form.idcard.value,
            phone: form.tel.value
          }
        },
        dataType: 'json',
        timeout: 10000,
        success: function success(res) {
          clearInterval(timer);
          $('.form .do-award')
            .text('确认领取')
            .removeAttr('disabled');
          if (res.code === 0) {
            // 隐藏表单
            $('.form')
              .removeClass('form-animation-in')
              .addClass('form-animation-out');
            setTimeout(function() {
              $('.form').hide();
            }, 400);
            $('html').attr('style', 'font-size: ' + $('html').css('font-size'));
            $('body').attr('style', 'font-size: ' + $('body').css('font-size'));

            $.toast({ text: '领取成功', icon: 'icon-success', delay: 2000 });
            hasGotAward = true;
            // 存储order_id
            orderId = res.data.order_id;
            sessionStorage.setItem('order_id', res.data.order_id);
            flushPage();
            // 根据接口返回值更新页面状态
            renderAwardInfo(res);
          } else if (res.code === -401) {
            // token已过期
            showerrorpage({
              target: '',
              img_url: 'www.baidu.com',
              content: '页面已经过期',
              button_text: '刷新页面',
              callback: function callback() {
                sessionStorage.removeItem('token');
                sessionStorage.removeItem('order_id');
                window.location.reload();
              }
            });
          } else {
            $.toast({ text: res.msg || '领取失败' });
          }
        },
        error: function error(e) {
          clearInterval(timer);
          $('.form .do-award')
            .text('确认领取')
            .removeAttr('disabled');
          hideloadpage();
          showerrorpage({
            target: '',
            img_url: 'www.baidu.com',
            content: '页面加载失败',
            button_text: '重新加载',
            callback: function callback() {
              window.location.reload();
            }
          });
        }
      });

writer&contact

{
  "name":"Jontyy" , 
  "email": " jontyy@163.com"
}1234

gitHub

https://github.com/YJD199798