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