使用Easy Mock模拟数据,ajax请求数据小例子

本文介绍如何使用EasyMock模拟数据并通过AJAX请求获取这些数据以更新页面。首先介绍了如何在EasyMock中设置模拟数据,包括用户头像、姓名和性别等信息。接着讲解了如何利用jQuery的getJSON()函数发起请求并调用渲染函数来更新DOM。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近学习了一下用Easy Mock模拟数据,然后通过ajax请求数据返回显示到页面上,完成一个请求数据和显示的过程,下面通过一个获取用户信息例子来说明一下:


1. 使用Easy Mock模拟数据
  • 在Easy Mock上新建一个项目,项目基础url为ajaxData,打开项目,创建接口

图片描述

  • 将获取方式为get,接口的url设为getUserInfo

图片描述

  • 添加用户信息数据:用户头像 avator,姓名 nickname,性别 sex

图片描述


2. 请求获取数据,更新页面
  • ajax主动向后端请求,使用jQuery中的getJSON()函数,从服务器加载json编码的数据,更新dom

图片描述


3. 学习函数式编程的一些想法
  • 数据通信和渲染页面是两件事,我们要将它们放开来做,将之前更新dom的代码封装成一个renderUserInfo()函数,只需要传一个参数data就可以实现渲染页面

图片描述

  • 如何实现数据通信?
    通过异步回调函数,先请求这个链接,请求传输数据需要时间,此时会先执行下面的getUserInfo(renderUserInfo)渲染页面,当获取数据成功是返回执行callback(data),完成更新页面。

图片描述


  • 学习小问题和小理解:
    js解决异步处理的问题实际应用?
    js中有很多问题消耗时间,比如传输ajax,数据库处理,文件的读写消耗时间等,通过callback回调,当成功返回时执行,可以减少页面更新时间。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值