mockjs、fiddler模拟前后端交互

mockjs是用于mock数据(造假数据)的组件。

mockjs官网链接为:http://mockjs.com/;mockjs官网有mockjs的源代码、API以及示例。

mockjs拦截ajax请求

mockjs拦截my.json、/my请求,返回mock数据

Mock.mock(/\/my/, {
    ‘list|1-10‘: [{
        ‘id|+1‘: 1,
        ‘email‘: ‘@EMAIL‘
    }]
});

Mock.mock(/my.json/, {
    ‘list|1-10‘: [{
        ‘id|+1‘: 1,
        ‘email‘: ‘@EMAIL‘
    }]
});

$.ajax({
    url: ‘/my‘,
    dataType: ‘json‘,
    success: function(data, status, jqXHR) {
        $(‘<pre>‘).text(JSON.stringify(data, null, 4)).appendTo(‘body‘);
    }
});

$.ajax({
    url: ‘my.json‘,
    dataType: ‘json‘,
    success: function(data, status, jqXHR) {
        $(‘<pre>‘).text(JSON.stringify(data, null, 4)).appendTo(‘body‘);
    }
});

注意:当请求为json数据时,配置ajax属性dataType: "json"

时间: 2024-10-25 08:45:58

mockjs、fiddler模拟前后端交互的相关文章

写给刚入门的前端工程师的前后端交互指南

转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据.毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列将来前端工程师应该必备的同后端打交道的常用技能. 服务端渲染 谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经历过服务端的数据渲染,接口->前端赋值->模版渲染 .这一切都在服务器完成,我们查看源码时候

前后端交互模型(一个面试题引发的思考总结)

客户端和服务端的交互 面试题: 当用户在地址栏中输入网址,到最后看到页面,中间都经历了什么? (引出前后端交互模型的内容) 客户端 =======> 服务端 (request请求阶段) 服务端 <======= 客户端 (responese响应阶段) 1.URL地址解析 2.DNS域名解析(DNS服务器) 3.和服务器建立TCP连接 (三次握手) 4.把客户端信息传递给服务器(发送HTTP请求) 5.服务器得到并处理请求(HTTP响应内容) 6.客户端渲染服务器返回的内容 7.和服务器端断开T

网页前后端交互示例

对于网页开发而言,网页与服务器之间的数据交互是很频繁的,至关重要的一件事情.但是对于很多的初学者来说,这就成了一个不可逾越的难点问题,本篇博客将从一个初学者的关点讲解其中一种交互方式,此方法经过本人验证有效,并附有代码. 首先要实现网页前后台程序的交互需要安装后台框架,本人安装的框架为wamp(windows+apache+mysql+php).安装程序可以通过我在百度网盘上的分享链接下载http://pan.baidu.com/s/1cIKb8a 提取码是cnfh.至于安装过程中的配置可以参考

浅谈前后端交互

首先,关于接口文档--由后台设计修改(前端是接口文档的使用者) 其次,前后端交互的数据,格式是:json,(xml不多了) 重要的是,前后端如何交互??--接口地址+前端请求的参数+后台返回的参数 1.接口地址: 2.前端请求的参数: 形式:get/post(get从指定服务器提取数据,post将数据提交给指定服务器): 所有前端url后面的参数都是辅助后台数据查询的:若不需要参数,则后台会直接将url给前端: 注:为什么需要在请求的时候传入参数??--后台在查询数据库的时候需要按条件查询. 3

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永

SSM-网站后台管理系统制作(4)---Ajax前后端交互

前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码有点像. 学习教程:http://how2j.cn/ 菜鸟教程 上面都有讲解, 前端Ajax代码 1 </script> 2 3 <script language="javascript" type="text/javascript"> 4 $(

百度ueditor的图片上传,前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.

Vue-CLI项目-axios模块前后端交互(类似ajax提交)

08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$route.params.pk || this.$route.query.pk

前后端交互之封装Ajax+SpringMVC源码分析

为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在开发中是经常用到的.再比如一些前端框架,例如easyui.ext.js等,ajax也是封装的. 编程的世界,封装无处不在. 具体js代码如下: /** * 增删改通用ajax请求 * @param type * @param url * @param datatype * @param conten