前端資料與後臺分離，使用mockjs模擬後臺返回json資料

lkycan發表於2017-12-14
前端MockJSON

##如何不依賴後端返回的JSON資料，比後臺早一步下班

使用mockjs ，造json資料 例子： 效果：

Paste_Image.png

操作，點選mockjs 隨機產生json資料。 程式碼：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
</head>

<body>
    <div>
        <h1 id="mockjs">mockjs</h1>
    </div>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <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() {
                //請求前的處理
                console.log('start');
            },
            success: function(req) {
                //請求成功時處理
                console.log(req);
            },
            complete: function() {
                //請求完成的處理
                console.log('end');
            },
            error: function(err) {
                //請求出錯處理
                console.log(err);
            }
        });
    });
    </script>
</body>

</html>

複製程式碼

如果想請求多一個api呢？ 只需要建多一個物件

Mock.mock(
        'http://getJSON', {
            "userName": '@name', //模擬名稱
            "age|1-100": 100, //模擬年齡(1-100)
        }
    );
複製程式碼

呼叫方法同上：

    $("#getJSON").click(function() {
        $.ajax({
            url: "http://getJSON", //請求的url地址
            dataType: "json", //返回格式為json
            async: true, //請求是否非同步，預設為非同步，這也是ajax重要特性
            data: {}, //引數值
            type: "GET", //請求方式
            beforeSend: function() {
                //請求前的處理
                console.log('start');
            },
            success: function(req) {
                //請求成功時處理
                console.log(req);
            },
            complete: function() {
                //請求完成的處理
                console.log('end');
            },
            error: function(err) {
                //請求出錯處理
                console.log(err);
            }
        });
    });

複製程式碼

相關文章