使用jquery-mockjax模拟ajax请求做前台测试

一般来说，我们做web开发的时候前后台是分开做的，这样带来的好处是前台的开发人员可以安心的写前台代码而后台的小伙伴就安心研究后台就OK了。

但是这样带来一个问题，当后台的小伙伴被天灾军团带走了，那前台需要依赖后台服务的代码怎么办呢？  方法是有的： 寻求近卫军团帮忙

近卫军团有很多选手，今天要说的是 jQueryMock 这位。   mockjax官方地址：https://github.com/appendto/jquery-mockjax/

首先在你需要测试的页面里引入

  <script src="../lib/jquery-1.11.1.min.js"></script>
  <script src="../lib/jquery.mockjax.js"></script>

对应文件可以去上面提到的地址找到release版本

然后重点来，比如我们现在有一个ajax请求发到后台，需要获取一些后台数据：

TestModel = $.extend(TestModel, {
	ajaxTest : function() {
		$.ajax({
			url : '/test/Qunit_MockAjax_Test.action',
			type : 'GET',
			async: false,
			error : function(xhr) {
				alert('error');
			},
			success : function(response) {
				return response.result;
			}
		});
	}
});

现在意外发生了，写‘/test/Qunit_MockAjax_Test.action‘这个action的小伙伴被屠夫钩走而且咬住了，一时半会回不来了，我们怎么玩呢？不能傻傻的等他回来啊。这个时候我们可以虚拟一个ajax请求的返回值

/**
 * 虚拟Ajax的请求响应
 */
$.mockjax({
    url: '/test/Qunit_MockAjax_Test.action',
    status: 200,
    responseTime: 50,
    responseText: {"result":"hello mockAjax"}
    });

这里面的url，就是你请求的url地址，所有指向这个地址的请求都会被mockjax截获，按照你下面配置的参数给出返回。

比如我们这里的返回就是 {"result":"hello mockAjax"} 这个json格式的返回值了。

然后我们就可以继续玩耍了，忘了那个跟屠夫一起腐烂的小伙伴吧~~~

版权声明：本文为博主原创文章，未经博主允许不得转载。