jQuery Mockjax使用总结

一、mockjax介绍
在前后台共同进行一个项目的时候常会遇到一种情景，大家统一定义好接口数据格式后，前后端各自按照接口进行开发，当前端需要和后台交互调用数据时，运用mockjax插件就不用再等后台传递数据就可以进行模拟测试，再继续开发。
二、使用方法
模拟一个登陆提交表单
1、导入相应的插件
下载mockjax插件
下载jQuery插件

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.mockjax.min.js" ></script>

2、页面表单的请求为

/get/article/login

3、新建HTML页面，命名为：form_login.html

<form id="myform"><fieldset><legend>登录</legend><label for="username">用户名：</label><input id="username" type="text" name="username" /><br /><label for="pwd">密码：</label><input id="pwd" type="password" name="pwd" /><br /><button type="button" id="submit_login">登录</button></fieldset>
</form>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.mockjax.min.js" ></script>
<script type="text/javascript" src="js/mock_login.js" ></script>

4、将执行操作的js代码写到mock_login.js页面中：

;(function(){var config = [{url: '/get/article/login',responseText: {status:200,user: []},response: function(rq){console.log("rq.data:"+rq);this.responseText.user.push({mock_name:"joe",mock_pwd:"111"});}}];for(var i = 0;i < config.length;i++){$.mockjax(config[i]);}var lg_name = $("#username").val();var lg_pwd = $("#pwd").val();$(document).ajaxStart(function(){alert("发起请求...."); });$(document).ajaxStop(function(){alert("请求完成....");});$("#submit_login").click(function(){$.ajax({type:"post",url: '/get/article/login',async:true,success: function(result){var getUser = JSON.stringify(result.user,["mock_name"]);var Obj_User = JSON.parse(getUser);$.each(Obj_User,function(i,item){alert(item.mock_name);});alert("result:=="+Obj_User);/*if(){}*/},error:function(xhr){console.log(xhr);alert("sorry！ miss some error！");}});});
})()

模拟操作到这里就完成了，后面只需要根据自己的需求定义相应的操作就OK了！
三、遇到的问题
1、JSON对象与字符串之间的相互转换

如果前台传递多个类格式的JSON数组，也就是集合类型：例如：
[{"name":"a"},{"name","b"},{"name","c"}]
则无法传递，此时必须使用JSON.stringify将数组对象转换成字符串，再进行AJAX传递即可。
比如我有两个变量，我要将a转换成字符串，将b转换成JSON对象：

var a={"name":"tom","sex":"男","age":"24"}; var b='{"name":"Mike","sex":"女","age":"29"}';

在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。
JSON.stringify(obj)将JSON转为字符串。
JSON.parse(string)将字符串转为JSON格式；
ie8(兼容模式),ie7和ie6没有JSON对象，不过http://www.json.org/js.html提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象，

var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));

2、html页面中button类型如果写成submit类型的话，$.mockjax会返回500的HTTP状态码，表示服务器遇到错误，无法完成请求，后面的程序将无法进行下去。所以后来我把button类型改成了button，就能执行后面ajax中的操作了。

jQuery Mockjax使用总结相关推荐

jquery.autocomplete 使用解析
页面引用 <script type="text/javascript" src="${base}/autocom/jquery-1.8.2.min.js" ...
JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)，JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
jquery.orgchart.js 简单demo,自定义内容，自定义事件
orgchart简单demo GIT地址: https://github.com/Vlovely/orgchartDemo.git 预览图代码示例 <!DOCTYPE html> < ...
JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
景点门票销售系统系统java_某景点门票销售管理系统
[实例简介] 可用于学校实训课大作业,有数据库有文档可用于学校实训课大作业,有数据库有文档可用于学校实训课大作业,有数据库有文档可用于学校实训课大作业,有数据库有文档 [实例截图] [核心代码] ...
前端炫酷登录页，拿来就能用
一. 炫酷星空代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
5个炫酷登录页面，拿去就能用（附源码）
登录页面,觉得显示效果很好,借鉴其他博主的,喜欢的可以收藏关注,不商用,只为学习传播目录 1.炫酷星空登录 2.动态云层登录 3.深海灯光水母登录 4.炫酷蛛网登录 5.彩色气泡登录 1.炫酷星空登 ...
input自动填充-Autocomplete
首先需要下载包地址是点击打开链接. 页面引用 <script type="text/javascript" src="${base}/autocom/jquery ...

jQuery Mockjax使用总结

jQuery Mockjax使用总结相关推荐

最新文章

热门文章