ajax数据编写分页,原生js开发AJAX数据分页请求实例

1. 数据交互

后台地址数据接口地址 https://route.showapi.com/181-1

请求的参数

请求账号 showapi_appid: 30603

请求密码 showapi_sign:98960666afeb4992ae91971d13494090

请求多少条数据 num :8

是否随机拉取数据:rand:1

从多少页开始请求:pag:1

https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&num=8&rand=1&page=1

2. 解析数据并且动态dom生成

for循环解析数组

querySelector

innerHMTL

前端发起数据请求

后台验证请求(前后端数据通信 建立数据通道 验证请求状态)

后台根据请求的参数 发送数据

数据通过回调函数回馈到前端

代码结构:

效果展示:

由最代码官方编辑于2017-8-11 22:05:29