Mock.js实现的功能。
基于数据模板生成数据。
基于HTML模板生成数据。
拦截并模拟Ajax请求。
本文仅演示使用mock.js进行模拟并拦截Ajax请求。
首先页面中先引用:
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="http://mockjs.com/dist/mock.js"></script>
定义DIV:
<div> <h1 id="mockjs">mockjs</h1> </div>
JS代码如下:
<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() { //请求前的处理 }, success: function(req) { //请求成功时处理 console.log(req); }, complete: function() { //请求完成的处理 }, error: function() { //请求出错处理 } }); }); </script>
运行效果图如下:
通过上面效果图可以看到每次的数据都不一样。
想了解更多Mock命令,可以查看 Mock.js 官网:http://mockjs.com/
以上仅仅是抛砖引玉。
为了系统管理和使用更方便,大家可以了解一下 阿里RAP 。
RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率。我们的口号:提高效率,回家吃晚饭!
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影:贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前ByDDD

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

WebStorm Mac版
好用的JavaScript开发工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。