Mock.js的简单使用案例

介绍

mock.js 是一个可以生成随机数据,拦截 Ajax 请求 模拟后台响应数据,让前端攻城师独立于后端进行开发的插件。
当我们在做一些简单的前端代码测试的时候,仅仅是写一些简单的案例,又懒得去搭建复杂的后台服务来为前端的Ajax请求响应交互数据,这时候 Mock.js 这个插件就起到了非常便捷的作用。
我们只需要在文本标记页面引入 mock.js ,然后通过js代码在页面初始化的时候,用 Mock 注册 模拟的url和响应数据。当Ajax请求模拟的url,将会得到mock响应的“测试数据”。
此外mock还有专门生成随机数据的Mack.Random模块,用于生成不同类型的随机数据,例如:省份,城市,时间,短文段落,句子,随机姓名,身份证号码,邮箱地址,IP,域名,UUID,GUID,url,颜色,rgb颜色,图片等。有兴趣的朋友可以通过 mock 的官网了解更多详细的使用说明:http://mockjs.com/

代码案例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Mock js Demo</title>
  <script type="text/javascript" src="/localtest/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
 </head>
 <body>
  <script type="text/javascript">
  <!--
		/*
		* mock.js 是一个拦截url请求,模拟后台响应数据生成器插件
		* 初始化的时候注册需要模拟的url响应数据,当Ajax请求注册的url时,就会响应被注册的结果
		*/
		var url = 'http://local.mock/test.do';
		Mock.mock(url, "this is mock test response message.");

		$(function(){
			$.get(url, function(data){ 
				console.log(data);
				alert("响应结果:"+data);
			});
		});
  //-->
  </script>
 </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值