<!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. JavaScript之经典面试题

    1.作用域经典面试题 var num = 123; // f1函数写好了,作用域就定下来了,也就是作用域链定下来了 // f1函数作用域链: f1函数作用域 ==> 全局作用域 function ...

  2. asp.net webapi关闭https配置

    将s去掉就行

  3. 私有Maven仓库安装和使用

    安装 这里选择安装的是windows平台,linux安装类似,下载可能要梯子 官网下载页 https://help.sonatype.com/repomanager2/download 下载链接 ht ...

  4. cmd运行乱码或显示编码GBK的不可映射字符解决方法

    出现这样的错误,一般是因为代码中含有中文字符,注释中的中文字符也算.由于使用cmd运行java程序的时候,系统默认的编码格式是gbk.而包含中文字符的代码一般是Unicode格式,所以直接运行含有中文 ...

  5. pathon基础2

    支持不同文件,不同sheet页 import xlrdimport xlwtimport osimport time; #往日志文件中追加内容函数def writeLogfile(filename,c ...

  6. java中读取word文档里的内容

    package com.cn.peitest.excel.word; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  7. C# ——获取各国时间

    DateTime dt = TimeZoneInfo.ConvertTimeToUtc(DateTime.Now, TimeZoneInfo.Local); DateTime dt1 = TimeZo ...

  8. [LeetCode98]98. Validate Binary Search Tree判断二叉搜索树

    判断二叉搜索树的方法是: 中序遍历形成递增序列 //全局变量记录中序遍历产生的序列,因为要递归,所以要用全局变量 List<Integer> list = new ArrayList< ...

  9. Qt学习笔记-启动一个额外的应用程序-获取输入的回车信号

    现在让我们的程序模拟windows下的运用程序. 在命令行中输入命令.点击确定即可运行系统中的程序. 添加头文件#include <QProcess> 在确定按钮的响应函数中写上功能要求. ...

  10. saltstack批量管理文件和计划任务

    简介 saltstack是由thomas Hatch于创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统.用来管理你的基础架构,可轻松管理成千上万台服务器. 关于saltstack更多功能本 ...