码迷,mamicode.com
首页 > Web开发 > 详细

mockjax & mockjson

时间:2014-09-24 19:33:47      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   数据   

准备工作:

  首先你需要两个库:mockjax: https://github.com/appendto/jquery-mockjax/

           mockjson: https://github.com/mennovanslooten/mockJSON

为什么使用mock:

  我们在开发的过程中,经常遇到一个项目在开发的时候,接口定义完成后,前后端分开去开发,前端在开发完成后,后端的接口还没有出来,那么前端就无法进行测试,使用mock,就可以模拟出接口中的json数据,也可以模拟ajax请求,这对于开发来说,无疑是一个大好消息。

 

怎么使用:

  在程序中正常调用ajax

 1 $.ajax({
 2         type: "POST",
 3         url: ‘url‘,
 4         data: {},
 5         dataType: ‘json‘,
 6         success: function(data) {
 7             
 8         },
 9         error: function(data) {
10             
11         }
12     })

  这个时候我们发出了一个请求,请求接口就是项目中定义好的接口 url,现在我们需要使用mockjax创建一个模拟请求,在mockjax中使用mockjson模拟json数据:

$.mockJSON.data.KEY = [‘关键词1‘, ‘关键词2‘, ‘关键词3‘, ‘关键词4‘, ‘关键词5‘, ‘关键词6‘, ‘关键词7‘, ‘关键词8‘, ‘关键词9‘, ‘关键词10‘];

$.mockjax({
    url: ‘url‘,
    status: 200,
    responseTime: 750,
    response: function() {        
        var data = $.mockJSON.generateFromTemplate({
            "list|20-30": [{
                "id|+1": 1,
                "img": "images/1.jpg",
                "title": "@KEY ",
                "level": "1",
                "group|0-1": true,
                "park|0-1": true,
                "address": "海南",
                "price|100-500": 100
            }]
        });
        this.responseText = data;
    }
});

  这样,我们在发出请求后,就会得到一个json数据,我们就可以用这个json进行页面的操作了。

  当然,mockjax也是可以接收参数的,我们查看 response: function(settings){},我们输出settings消息:console.log(settings);在控制台找到data节点,我们传递的参数就能找到了。

mockjax & mockjson

标签:style   blog   http   color   io   os   使用   ar   数据   

原文地址:http://www.cnblogs.com/wuzhuo/p/3991115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!