zoukankan      html  css  js  c++  java
  • ajax开发模拟后端数据接口

    在做前端开发的时候,特别是一些业务逻辑集中在前端的开发中。我们经常需要自己来模拟获取到后台接口的数据。为什么要模拟?可能后台接口还没有开发完成,可能后台还没有数据返回,可能。。。等等原因。曾经,我也尝试过自己使用nodejs来自己写需要模拟后台接口,但因为种种原因,最后都不了了之,或许是因为太复杂,在开发的时候显得不够人性化。偶然之间,一个转身,我发现了mockjax和mockJSON。

    mockjax和mockjson

    mockjax主要是可以针对指定的网址进行mock,当Ajax请求网址时进行拦截并回传假的数据。OK,我要的就是这种功能!
    mockJSON则有点像是JSON的数据自动生成中心,可以根据我们指定的格式随机生成回传的JSON数据,在需要大量数据时比较有用。
    贴上这俩在github的地址,有兴趣的自行围观!

    mockjax

    mockjson

    另外,这两个都是基于jquery开发的插件,所以针对jquery开发流派还是比较有用!

    示例

    首先,当然还是引入。

    <script src="vendor/jquery.1.11.1.js"></script>
    <script src="vendor/jquery.mockjax.js"></script>
    <script src="vendor/jquery.mockjson.js"></script>
    

    然后我们写一个ajax请求

    $(function() {
        $.ajax({
            url: '/WebApi/test.html',
            type: 'GET',
            error: function(xhr) {
                alert('请求失败');
            },
            success: function(res) {
                alert(res);
            }
        });
    });
    

    由于url不存在,请求失败。然后我们来使用mockjax!

    var isAjaxMocked = true;
    if (isAjaxMocked) {
        $.mockjax({
            url: '/WebApi/test.html',
            status: 200,
            responseTime: 900,
            responseText: {'info': 'hello world', 'status': 'success'}
        });
    }
    

    ok,mock ajax请求成功。而且我们通过设置开关,可以很轻易的在模拟和真实的之间切换。
    当需要批量模拟数据时,我们可以使用mockJSON,在这里我就不详细介绍了。

  • 相关阅读:
    jquery ajax loading效果
    php中count 多维数组长度统计实现方法
    jquery 中Map、each的应用
    转:php获取网页内容方法总结
    经典JavaScript正则表达式实战
    JQuery this 和 $(this) 的区别
    Windows Server 2003 的 Boot.ini 文件的/3GB开关选项
    用ghost装双系统(装03,xp系统)
    Possible memory leak with ReportViewer.RefreshReport() ReportViewer内存回收缺陷
    添加IIS出错,提示缺少CONVLOG.exe文件
  • 原文地址:https://www.cnblogs.com/myqianlan/p/4196007.html
Copyright © 2011-2022 走看看