需要完成的工作:利用mock js随机生成数据,通过ajax请求,获取这些数据并展示在网页中。

一 mock js随机生成数据

官方文档中,Mock.mock( ),可以说是mock的精髓所在。

Mock.mock( rurl?, rtype?, template|function( options ) )

根据数据模板生成模拟数据。

-rurl:当拦截到匹配rurl的Ajax请求时,根据数据模板template生成模拟数据,作为响应数据返回。
-rtype:表示需要拦截的ajax请求类型,比如get、post、put、delete等。

//js部分

var testPath = '/born',     //匹配ajax操作的路径
testMethod = 'get'; //匹配ajax请求类型 let temp = {
'list|5-10': [{
'aid|+1': 1,
'title|1-6': '我是标题 ', //30字以内的标题
'update_time|10000-99999':10000,
'thumb':'@URL', //随机url地址
'color' : '@color', //随机颜色
'image':'@IMAGE("200x100")' //尺寸为200*100的图片
}]
} Mock.mock(testPath, testMethod, temp); //生成模拟数据

二 Ajax操作

点击按钮,获取数据,并对HTML元素进行操作

//HTML部分
<h3>==测试·准备请求ajax·测试==</h3> <p class="p"></p>
<button>点我请求ajax</button> <article class="temp">
<!--<a href="">
<p class="title"></p>
<img src="" alt="">
</a> -->
</article> <article class="hide" id="module">
<a href="">
<p class="title"></p>
<img src="" alt="">
</a>
</article> //Ajax请求处理 $("button").bind('click',function(){
$.ajax({
url: testPath,
type: 'get',
dataType: 'json',
timeout: 1000,
success:function(data, status, jqXHR){
fillTemplet(data, status, jqXHR); //ajax请求成功,执行这些操作
},
error:function(req,status,err){
console.log('some err')
console.log('req',req);
console.log('status',status);
console.log('err',err);
}
})
});

三 DOM操作

采用了两种方法,一种是直接在js中写入HTML,包括元素、内容等,另一种是克隆HTML模板,然后对其添加内容。推荐使用方法二,便于修改调试,符合内容、样式、数据分离的规则。

//js部分

//方法一
function fillTemplet(data, status, jqXHR){
let father = $('.temp'); $.each(data.list,function(index,obj){ //根据mock数据(temp)生成内容
//直接写入html
let block = '<a href="'+ obj.thumb +'">'
+ '<p class="title">'+ obj.title +'</p>'
+ '<img src="'+ obj.image +'" alt="我是图片">'
+'</a>' father.append(block);
})
} //方法二
function fillTemplet(data, status, jqXHR){
let father = $('.temp'); $.each(data.list,function(index,obj){
//方法二,克隆HTML中写好的module模板
let child = $('#module').clone().removeAttr('id').removeClass('hide');
child.children('a').attr('href',obj.thumb);
child.find('p').text(obj.title).css('color',obj.color);
child.find('img').attr('src',obj.image);
father.append(child);
})
}

Mockjs+Ajax实践的更多相关文章

  1. Ajax实践之用户是否存在

    关于Ajax在之前的学习中,已经对它的基础知识有了初步的了解.仅仅是欠实践. 那么接下来就让实践来检验一下真理吧! 基础见:http://blog.csdn.net/liu_yujie2011com/ ...

  2. (转)JAVA AJAX教程第一章-初始AJAX

    既然是认识AJAX,理论和实践相结合,这样让自己学的更快,理解更深入,我分一下几点: 1.  认识传统的同步交互方式和AJAX解决方案 2.  AJAX使用到的技术 3.  实例体验AJAX 一.同步 ...

  3. AJAX之JSON

    AJAX=Asynchronous JavaScript and XML(异步的JavaScript 和XML). AJAX不是新的编程语言,而是一种是用现代标准的新方法,用于创建快速动态网页的技术. ...

  4. HTTP请求封装:Ajax与RESTful API

    一.HTTP请求 HTTP即超文本传输协议,用以进行HTML 文件. 图片文件. 查询结果等的网络传输. 一个完整的HTTP请求包括:请求行.请求头.空行和请求数据(请求数据可以为空) HTTP1.1 ...

  5. ajax 兼容性问题解决 集锦

    这两天刚解决了ajax多浏览器兼容的问题,主要就针对Firefox的,开始还以为Firefox不支持ajax呢(别笑我呀,不怎么了解Firefox也没用过,呵呵),多亏看了下面的文章才让我了解ajax ...

  6. React笔记_(5)_react语法4

    ajax 数据应用场景 在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间. 正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等 ...

  7. Daily Scrumming 2015.10.23(Day 4)

    今明两天任务表 Member Today’s Task Tomorrow’s Task 江昊 继续学习rails ActiveRecord 数据库迁移 域名备案申请 学习rails router配置与 ...

  8. 关于php上传文件过大的表单回填

    也许标题有点绕口,有点无法让人理解.请原谅博主,语文学的不好,都赖体育老师. 问题场景重现:在某次迭代中,接到这样一个需求:当新建或编辑一个Bug(包含附件以及其他字段)上传附件过大时,退回到编辑页面 ...

  9. atitit.ajax 最佳实践跟框架选型 o99

    atitit.ajax 最佳实践跟框架选型 1. 选型框架dwr/dwr3 跟jq 1 2. DWR方便的地方分为两个地方. 1 3. dwr 优点: 1 4. 缺点: 2 5. 根jq的区别 2 1 ...

随机推荐

  1. PTA数据结构与算法题目集(中文) 7-42整型关键字的散列映射 (25 分)

    PTA数据结构与算法题目集(中文)  7-42整型关键字的散列映射 (25 分) 7-42 整型关键字的散列映射 (25 分)   给定一系列整型关键字和素数P,用除留余数法定义的散列函数将关键字映射 ...

  2. MySQL 在Docker下快速安装(Ubuntu 16.4)

    采用dockerhub安装 docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/my ...

  3. 【网络安全】——客户端安全(浏览器安全、XSS、CSRF、Clickjacking)

    ​ 近在学习网络安全相关的知识,于是先从业内一本系统讲Web安全的书<白帽子讲Web安全>系统学习Web安全的相关知识.在此整理书中的知识层次,不求详尽,只求自己对整个Web安全梗概有所了 ...

  4. MTK Android 设置下添加一级菜单[ZedielPcbTest]

    功能描述:Android7.1.2 设置下添加一级菜单[ZedielPcbTest],点击ZedielPcbTest,启动ZedielPcbTest.apk应用. 编译:需要在out目录删除Settt ...

  5. vue技术栈进阶(01.使用vue-cli3创建项目)

    使用vue-cli3创建一个项目 1) 使用Vue UI创建.管理项目 1.安装依赖的脚手架包. 2.命令行中输入vue ui 即可以打开可视化界面 可视化界面: 2)项目结构目录整理 3)基本配置 ...

  6. PHPStorm IDE 快捷键

    ⌘——Command ⌃ ——Control ⌥——Option/Alt ⇧——Shift ⇪——Caps Lock fn——功能键就是fn编辑 Command+alt+T 用 (if..else, ...

  7. Scala——的并行集合

    当出现Kafka单个分区数据量很大,但每个分区的数据量很平均的情况时,我们往往采用下面两种方案增加并行度: l  增加Kafka分区数量 l  对拉取过来的数据执行repartition 但是针对这种 ...

  8. scala_spark实践2

    参考:jianshu.com/p/9d2d225c1951 监听socket获取数据,代码如下:这里使用nc -lk 9999 在ip为10.121.33.44的机器上发送消息 object Sock ...

  9. 曹工说Redis源码(6)-- redis server 主循环大体流程解析

    文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...

  10. Python 注释(Python Comments)用法详解

    目录 1 Python 注释概述 2 Python 注释的作用 2.1 调试代码 2.2 提高程序的可读性 3 Python 单行注释 3.1 Python 单行注释概述 3.2 单行注释注释单行代码 ...