<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/mock.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="box"></div>

        <script type="text/javascript">

            $(function() {

                Mock.mock('/mockTest', {

                    "userInfo|100": [

                        {   //生成|num个如下格式名字的数据

                            "id|+1": 1, //初始值是1每次id都+1

                            "name": "@cname", //名字为随机中文名字

                            "age|18-58": 25, //年龄为18-28之间的随机数字

                            "sex|1": ["男", "女"], //性别是数组中的一个，随机的

                            "job|1": ["web", "UI", "python", "php", "java", "go", "ios", "andios", "bootstrap", "jquery", "javascript", "html5", "CSS3"], //工作是数组中的一个

                            "img_info|3":Mock.Random.image('100x100'),

                            "ListInfo|3":[{

                                  "img":Mock.Random.image('100x100')

                            }]

                        }

                    ]

                })

                //ajax接收数据，通过jq

                $.get('/mockTest', function(data) {

                    console.log(data)

                    var users = JSON.parse(data);

                    var html="";

                    $.each(users.userInfo, function(index,item) {

                        html += '<div><span>'+item.id+'</span>---'+

                                ' <span>'+item.name+'</span>---'+

                                ' <span>'+item.age+'</span><div>';

                    })

                    $(".box").append(html);

                })

            })

        </script>

    </body>

</html>

效果预览：

jQuery mock.js模拟的使用的更多相关文章

  1. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  2. mock.js 模拟数据

    1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...

  3. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  4. Vue笔记：使用 mock.js 模拟数据

    在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可 ...

  5. mock.js模拟ajax数据请求

    在我们开发过程中存在着前端页面ui完成了,但是没有接口进行联调数据的情况,现在介绍一下用mock.js来完成数据的请求.这样在后期我们的后台接口完成后只需要更改请求的接口名字即可!前提是你的模拟字段名 ...

  6. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  7. axios + mock.js模拟数据实现前后端分离开发的实例代码

    首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...

  8. vue中使用axios（异步请求）和mock.js 模拟虚假数据

    一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...

  9. mock.js模拟生成假数据

    mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...

随机推荐

  1. OSPF综合实验

    实验要求: 1.R4为ISP,其上只能配置IP地址,R4与其他所有直连设备间使用共有IP 2.R3--R5/6/7为MGRE环境,R3为中心站点 3.整个OSPF环境IP地址为172.16.0.0/1 ...

  2. 基于frp的内网穿透实例1-通过SSH访问内网机器

    原文地址:https://wuter.cn/1804.html/ 老母鸡终于到了,作为一个能运行linux系统的四核1G硬件,它还是比较小巧的. FRP 全名:Fast Reverse Proxy.F ...

  3. git 清除本地git commit的内容

    由于我经常git add . , 然后再git commit -m "文字说明",这样有时候代码嵌套再另一个项目里面,就会把外面的项目一起提交了,导致提交的代码不是我想要的.小菜鸟 ...

  4. Servlet+JSP+JDBC综合案例

    层级关系: 一.Util包 包里面写一个JDBCTools.java文件 功能:实现数据库连接返回一个Connection对象,并且可以实现数据库相应资源的关闭! 注意事项: 1.定义成员变量 1 p ...

  5. linux学习之--虚拟机安装linux【centerＯＳ】

    计划把学习中的软件安装使用记录下来,以下是使用VMware 按照 Linux 使用桥接网络虚拟机和windows中都有不同的ip地址

  6. v-on以及v-show、v-if的一些小杂碎

    v-on的参数问题: 当通过methods中定义方法,以供@click调用时,需要注意参数问题: 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加.但是注意:如果方法本身中有一个参数,那么 ...

  7. mysql词法分析和语法分析

    如果没有命中查询缓存,就要开始真正执行语句了.首先,MySQL 需要知道你要做什么,因此需要对 SQL 语句做解析.分析器先会做"词法分析".你输入的是由多个字符串和空格组成的一条 ...

  8. flume基本概念及相关参数详解

    1.flume是分布式的日志收集系统,把手机来的数据传送到目的地去 2.flume传输的数据的基本单位是 event,如果是文本文件,通常是一行记录.       event代表着一个数据流的最小完整 ...

  9. Spring--AOP、通知的执行顺序

    AOP执行顺序 如果我们在同一个方法自定义多个AOP,我们如何指定他们的执行顺序呢? 可以通过指定order,order越小越是最先执行. 配置AOP执行顺序的三种方式: 通过实现Ordered接口 ...

  10. Face_to_object_design

    二.实例 掷骰子游戏:三粒骰子,掷两次,比较两次的结果. 1.提炼 提炼对象:三粒骰子.游戏 提炼对象的属性和功能:掷骰子.比较点数 骰子: 属性:点数 功能:随机获取一个1~6之间的整数值. 游戏: ...