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

2022-07-08 19:59:55 浏览数 (1)

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

一般来说,我们做web开发的时候前后台是分开做的,这样带来的优点是前台的开发者能够安心的写前台代码而后台的小伙伴就安心研究后台就OK了。

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

近卫军团有非常多选手,今天要说的是 jQueryMock 这位。

mockjax官方地址:https://github.com/appendto/jquery-mockjax/

首先在你须要測试的页面里引入

代码语言:javascript复制
  <script src="../lib/jquery-1.11.1.min.js"></script>
  <script src="../lib/jquery.mockjax.js"></script>

相应文件能够去上面提到的地址找到release版本号

然后重点来。比方我们如今有一个ajax请求发到后台,须要获取一些后台数据:

代码语言:javascript复制
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请求的返回值

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

这里面的url,就是你请求的url地址。全部指向这个地址的请求都会被mockjax截获,依照你以下配置的參数给出返回。

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

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/115909.html原文链接:https://javaforall.cn

0 人点赞