前端数据与后台分离，使用mockjs模拟后台返回json数据

最新推荐文章于 2023-11-10 20:59:47 发布

weixin_34072857

最新推荐文章于 2023-11-10 20:59:47 发布

阅读量333

点赞数

文章标签： json 前端 javascript ViewUI

原文链接：https://juejin.im/post/5a3217bff265da43252950e4

版权

##如何不依赖后端返回的JSON数据，比后台早一步下班

使用mockjs ，造json数据例子：效果：

操作，点击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);
            }
        });
    });

复制代码

转载于:https://juejin.im/post/5a3217bff265da43252950e4

weixin_34072857

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端数据与后台分离，使用mockjs模拟后台返回json数据

##如何不依赖后端返回的JSON数据，比后台早一步下班使用mockjs ，造json数据例子：效果：操作，点击mockjs 随机产生json数据。代码：<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8">&lt...
复制链接

扫一扫