使用Mock来拦截Ajax请求,获取随机产生的数据

前言: 在我们的实际开发当中, 后端的接囗往往是较晚才会出来。于是前端的许多开发都要等到后端的接囗出来了才能进行, 这样对于前端开发来说显得十分别动。如果有什么东西可以制造一些假的测试数据来模拟后端接囗的话, 那样前端开发就要方便很多了。
而Mock.js, 就刚好满足了这样的需求。Mock.js 的特点就是: 生成随机数据、拦截Ajax 请求。

使用:

  1. 下载mock.js
 可百度搜索mock.js官网
 也可以访问网址:https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js 
 下载mock.js
  1. 在项目中引用mock.js
  2. mock的语法:
//语法
Mock.mock("请求地址","请求方式",{返回数据的规则});

//例:
Mock.mock('./StudentInfo.do', "get", { 
            'list|4': [{
                'id|+1': 1,              //对象的id属性名依次加1
                "name": '@cname()',     //随机产生一个中文名
                addr: '@county(true)',   //随机产生一个地址
                'age|18-60': 1,         //随机产生一个数字 (范围在18~60之间)
                birth: '@date()',       //随机产生一个日期
                sex: '@integer(0, 1)',  //随机产生一个数学(0/1,0代表男,1代表女)
                email: '@EMAIL()',      //随机产生一个邮箱地址
                'like|1':['看书','运动','听音乐'],//在数组中随机选择一个
                'num1|1-100.2': 1,          //1~100中随机产生一个数字并保留两位小数
                mobile: /^1[3-9][0-9]{9}$/  //以正则产生一个手机号
            }]
        })

//关于mock的更多用法以及规则可参考百度

使用mock拦截示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我获取数据</button>
    

    <!-- 这里引入jquery.js文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- 这里引入mock.js文件 -->
    <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
        Mock.mock('./StudentInfo.do', "get", {
            'list|4': [{
                'id|+1': 1,              //对象的id属性名依次加1
                "name": '@cname()',     //随机产生一个中文名
                addr: '@county(true)',   //随机产生一个地址
                'age|18-60': 1,         //随机产生一个数字 (范围在18~60之间)
                birth: '@date()',       //随机产生一个日期
                sex: '@integer(0, 1)',  //随机产生一个数学(0/1,0代表男,1代表女)
                email: '@EMAIL()',      //随机产生一个邮箱地址
                'like|1':['看书','运动','听音乐'],//在数组中随机选择一个
                'num1|1-100.2': 1,          //1~100中随机产生一个数字并保留两位小数
                mobile: /^1[3-9][0-9]{9}$/  //以正则产生一个手机号
            }]
        })
        btn.onclick = function () {
         
            $.ajax({
                type: "get",		//请求的方式
                url: "./StudentInfo.do",         //请求地址
                dataType: "json",   //将服务器返回的数据转换为json对象
                data: {},  //传递给后台的参数 若没有可不写
                success: function (data) {
                    //这里写获得数据后需要执行的代码  e就是从后台获得的json对象;
                    console.log(data);
                }, asynh: true       //设置使用同步或异步  ,可不写默认为异步
            })
        }


    </script>
</body>

</html>

返回数据"data"示例:
使用Mock来拦截Ajax请求,获取随机产生的数据_第1张图片ajax不熟怎么办?一篇教你看懂ajax编程
想了解ajax? 访问:ajax编程详解

你可能感兴趣的:(js总结,mock拦截ajax请求,前端产生随机数据,mock,ajax与mock)