Mock.js 实例

Mock.js实现的功能。

• 基于数据模板生成数据。
• 基于HTML模板生成数据。
• 拦截并模拟Ajax请求。

本文仅演示使用mock.js进行模拟并拦截Ajax请求。

首先页面中先引用：

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

定义DIV：

<div>
    <h1 id="mockjs">mockjs</h1>
</div>

JS代码如下：

<script type="text/javascript">

    //调用mock方法模拟数据
    Mock.mock(
        'http://mockjs', {
            "userName" : '@name',     //模拟名称
            "age|1-100":100,          //模拟年龄(1-100)
            "color"    : "@color",    //模拟色值
            "date"     : "@date('yyyy-MM-dd')",  //模拟时间
            "url"      : "@url()",     //模拟url
            "content"  : "@cparagraph()" //模拟文本
        }
    );
    
    //ajax请求
    $("#mockjs").click(function(){
        $.ajax({
            url        : "http://mockjs",    //请求的url地址
            dataType   : "json",   //返回格式为json
            async      : true, //请求是否异步，默认为异步，这也是ajax重要特性
            data       : {},    //参数值
            type       : "GET",   //请求方式
            beforeSend : function() {
                //请求前的处理
            },
            success: function(req) {
                //请求成功时处理
                console.log(req);
            },
            complete: function() {
                //请求完成的处理
            },
            error: function() {
                //请求出错处理
            }
        });
    });
</script>

运行效果图如下：

FROM: https://segmentfault.com/a/1190000007491164

通过上面效果图可以看到每次的数据都不一样。

**************************************示例************************************************

//调用mock方法模拟数据
Mock.mock(
'http://mockjs', {
"N|0-2":2, //随机数
}
);

//ajax请求
var item = ['1,1,1','2,2,2','3,3,3'];
$.ajax({
url: 'http://mockjs',
type: 'GET',
dataType: 'json',
error: function(xhr) {
alert('无法获取!');
},
success: function(data) {
var num = data.N;
alert(num);
var ret = [item[num]];
alert(ret);
}
});