使用jquery-mockjax模拟ajax请求做前台測试[通俗易懂]

全栈程序员-用户IM • 2022年1月28日下午9:00 • 未分类

大家好，又见面了，我是全栈君。

一般来说，我们做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格式的返回值了。

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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/115909.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...