使用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格式的返回值了。 

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值