Mock.js的简单使用案例

最新推荐文章于 2024-08-13 17:03:54 发布

爱学习的甲壳虫

最新推荐文章于 2024-08-13 17:03:54 发布

阅读量792

点赞数

分类专栏： jQuery的Ajax操作拦截Ajax请求文章标签： mock Ajax jQuery

本文链接：https://blog.csdn.net/u013032479/article/details/89241798

版权

jQuery的Ajax操作同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

拦截Ajax请求

1 篇文章 0 订阅

订阅专栏

介绍

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>