一、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中的操作了。