Published on

Mockjax模拟Ajax响应数据

Authors

jQuery Mockjax 插件提供了简单而且极度灵活的接口，用来模拟ajax的请求和回应. 在引入Mockajx之前需要先引入jquery.

CDN引入使用**BootCDN,下载可在GitHub**下载.


<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js">
</script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.js">
</script>

一些不支持JSON转换的浏览器比如IE 6,7,8等,需要额外引入json.js.

有以下Ajax请求需要响应数据:

  $.ajax({
        url: '/sakura/user/login',
        data: { usercode: 'admin', password: 'admin' },
        type: 'POST',
        async: false,
        success: function (res) {
          console.log(res);
        },
      });

只需要设置:

//设置响应数据,如果是多个虚拟mockajx设置,可使用$.mockajx([{options},{...}])   
//$.mockajx({options})
Const ID=$.mockjax({//返回索引
      url: '/sakura/*',//可通过通配符 正则 匹配
      //模拟网络和服务器延迟（以毫秒为单位）的整数-number
      responseTime: '500', 
      responseText: JSON.stringify({
        status: 200,
        msg: '数据获取成功',
      }), //响应的模拟文本或模拟对象文字-String
    });

如果响应数据是从文件获取,而不是手动设置,可设置proxy属性,值为.json文件路径. 如果同时设置proxy和responseText,则proxy配置优先执行.

//通过.json文件获取响应数据   
 $.mockjax({
      url: '/sakura/*',
      status: 200, //number
      statusText: 'success', //服务器响应代码描述-String
      responseTime: '500', //模拟网络和服务器延迟（以毫秒为单位）的整数-number
      contentType: 'application/json;', //指定响应的内容类型-String
      proxy: './json.json', //数据获取路径
    });


//.json文件
{
  "data": {
    "aa": 111,
    "bb": 222
  }
}

options默认参数设置对象:

$.mockjaxSettings = {
  logging:       true,
  status:        200,
  statusText:    "OK",
  responseTime:  500,
  isTimeout:     false,
  throwUnmocked: false,
  contentType:   'text/plain',
  response:      '',
  responseText:  '',
  responseXML:   '',
  proxy:         '',
  proxyType:     'GET',
  lastModified:  null,
  etag:          '',
  headers: {
    etag: 'IJF@H#@923uf8023hFO@I#H#',
    'content-type' : 'text/plain'
  }
};

外部函数:

$.mockjax.clear(number|String ):清除模拟请求,若无参数,清除全部模拟请求(void )
                         number:清除具有该 ID 的处理程序
                         String: 清除具有该匹配 URL 的处理程序

$.mockjax.mockedAjaxCalls():返回所有模拟 ajax 调用的数组(Array<Object>)