Function implemented by Mock.js.

Generate data based on data templates.

Generate data based on HTML template.

Intercept and simulate Ajax requests.

This article only demonstrates using mock.js to simulate and intercept Ajax requests.

First of all, quote in the page:

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

Define DIV:

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

The JS code is as follows:

<script type="text/javascript">

    //調(diào)用mock方法模擬數(shù)據(jù)
    Mock.mock(
        &#39;http://mockjs&#39;, {
            "userName" : &#39;@name&#39;,     //模擬名稱
            "age|1-100":100,          //模擬年齡(1-100)
            "color"    : "@color",    //模擬色值
            "date"     : "@date(&#39;yyyy-MM-dd&#39;)",  //模擬時間
            "url"      : "@url()",     //模擬url
            "content"  : "@cparagraph()" //模擬文本
        }
    );
    
    //ajax請求
    $("#mockjs").click(function(){
        $.ajax({
            url        : "http://mockjs",    //請求的url地址
            dataType   : "json",   //返回格式為json
            async      : true, //請求是否異步，默認為異步，這也是ajax重要特性
            data       : {},    //參數(shù)值
            type       : "GET",   //請求方式
            beforeSend : function() {
                //請求前的處理
            },
            success: function(req) {
                //請求成功時處理
                console.log(req);
            },
            complete: function() {
                //請求完成的處理
            },
            error: function() {
                //請求出錯處理
            }
        });
    });
</script>

The running rendering is as follows:

You can see from the above rendering that the data is different every time.

If you want to know more Mock commands, you can check out the Mock.js official website: http://mockjs.com/

The above is just an introduction.

In order to make system management and use more convenient, everyone can learn about Ali RAP.

RAP is a visual interface management tool that analyzes the interface structure, dynamically generates simulation data, verifies the correctness of the real interface, and improves our collaboration efficiency through a series of automated tools around interface definition. Our slogan: Be more efficient and get home for dinner!