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