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

原创 2015年07月09日 09:46:21

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

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

相关文章推荐

jQuery Mockjax使用总结

一、mockjax介绍 在前后台共同进行一个项目的时候常会遇到一种情景,大家统一定义好接口数据格式后,前后端各自按照接口进行开发,当前端需要和后台交互调用数据时,运用mockjax插件就不用再等后台...

关于前后端分离开发的方法,jQuery的Mockjax:Ajax请求模拟

大多数后端开发人员都熟悉的概念,模拟的对象或方法存根进行单元测试。Mockjax给前端开发人员定义的,以及这些请求应如何响应Ajax请求的能力。这些例子可以非常简单或相当复杂的,占整个请求-响应工作流...

python 模拟ajax请求

python 模拟ajax请求

使用mock.js提供模拟数据

Mock.js官网:链接地址官方说明:*前后端分离,让前端工程师独立于后端开发。 *增加单元测试的真实性,通过随机数据,模拟各种场景。 *开发无侵入,不需要修改既有代码,就可以拦截aj...
  • cuo9958
  • cuo9958
  • 2017年01月03日 15:52
  • 2600

Mock.js -- 生成随机数据,拦截 Ajax 请求,让前端攻城师独立于后端进行开发

需求在Web的开发中,我遇到了这样的问题:前端写好的Ajax请求,在没有服务器返回数据的情况下,感觉就一直在进行一个黑箱操作。即使照着定好的接口文档来编写代码,也会出现这样那样不经意的Bug. 于是我...

一种模仿AJAX测试数据的方法

在前端编程中,经常需要编写AJAX模拟数据,但应用到生产环境后,又需要修改代码,导致大量的代码都处于调整状态,并且数据都处于静态化状态,以至于视图渲染的效果很差。能不能将模拟数据与业务逻辑完全隔离呢?...
  • yiifaa
  • yiifaa
  • 2016年11月27日 11:11
  • 1390

自己构建Ajax请求进行模拟QueryTask进行查询

ArcGIS JS API中用Query和QueryTask进行查询的时候其实是进行的Ajax请求,只不过是将该Ajax请求进行了封装,更好的方便二次开发人员调用而已。有时候我们用QueryTask进...

Java+FlexPaper+swfTools仿文库文档在线阅读

一、文档在线阅读思路      1.用OpenOffice把PPT、Word、Excel、Text转换为pdf     2.用SWFTool将生成的pdf转换成swf,然后利用FlexPl...

几款jQuery右键菜单插件介绍

在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单。 类似右键菜单的组件网上很多。一般而言,改变浏览器的默认菜单应...

前台参数使用Ajax请求时将参数带在URL后面需要两次encodeURI

为什么网上会有人提出在客户端对字符串重复编码两次呢.      如果因为项目需要,不能指定容器使用何种编码规则来解码提交的参数, 比如:需要接收来自不同页面,不同地址编码的参数内容时。 (又或者是开...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jquery-mockjax模拟ajax请求做前台测试
举报原因:
原因补充:

(最多只允许输入30个字)