针对移动端的前端工作流(6)—Ajax请求的正确姿势

在src/js/index.js中index.js中示例了处理一个ajax请求的正确姿势，其中有5点需要注意的地方，请看下面的demo

  2. /**
  3.  * 点击按钮发送ajax请求
  4.  * 1. 考虑ajax请求失败的情况
  5.  * 2. 考虑ajax请求成功，但是状态不是200的情况
  6.  * 3. 考虑ajax请求成功，状态是200，但是没有数据的情况
  7.  * 4. 考虑ajax重复请求的情况
  8.  * 5. 考虑ajax请求接口时间长的交互效果
  9.  */
  11. var submit = function () {
  13.     var me = $(this);
  15.     // 判断是否是重复点击
  16.     if (me.hasClass('disabled')) {
  18.         return;
  20.     }
  21.     me.addClass('disabled');
  23.     // 发送的数据
  24.     var sendData = {
  25.         time: 3
  26.     };
  28.     $.ajax({
  29.             url: 'http://wiki.xyzphp.com/t.php',
  30.             type: 'POST',
  31.             data: sendData,
  32.             beforeSend: function () {
  33.                 // 发送ajax请求前的loading
  34.                 lnv.pageloading();
  35.             }
  36.         })
  37.         // 服务器请求成功
  38.         .done(function (res) {
  40.             // 处理返回的数据，因为有的时候返回的数据可能是字符串，而非json格式
  41.             res = typeof(res) === 'string' ? JSON.parse(res) : res;
  43.             // 如果返回的数据状态是200
  44.             if (res.status == 200) {
  46.                 // 如果返回的数据data为空
  47.                 if (res.data.length === 0) {
  49.                     lnv.alert({
  50.                         title: '提示',
  51.                         content: '没有数据',
  52.                         alertBtnText: '确定',
  53.                         alertHandler: function () {
  54.                             alert('点击了确定');
  55.                         }
  56.                     });
  58.                 }
  59.                 else {
  61.                     // 如果返回的数据data不为空
  63.                 }
  65.             }
  66.             // 如果返回的数据状态不是200
  67.             else {
  69.                 alert('error');
  71.             }
  72.         })
  73.         // 服务器请求失败
  74.         .fail(function (jqXHR, textStatus, errorThrown) {
  76.             alert('error');
  78.         })
  79.         .always(function () {
  81.             // 无论成功还是失败，删掉loading效果
  82.             lnv.destroyloading();
  83.             // 删除重复点击的标示
  84.             me.removeClass('disabled');
  86.         });
  87. };