Ajax(续)

Coder_R
51 阅读1分钟

所有项目接口文档：apifox.com/apidoc/shar…

image.png

一、AJAX 概念和 axios 使用

1.AJAX 概念和 axios 使用

image.png

2.URL

image.png

image.png 协议：客户端和服务器之间的数据传输格式
域名：服务器上的资源服务器的地址

3.axios携带参数请求

image.png

image.png

4.axios响应错误处理

image.png

image.png

5.HTTP协议-请求报文

请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

image.png

image.png

6.HTTP协议-响应报文

image.png

image.png

image.png

7.接口文档

image.png

image.png body参数（请求体参数），写在data{}里

8.form-serialize 插件

.js文件，需要引入

image.png

image.png

1.给form表单起类名
2.给form表单中的内容，表单元数设置name属性，属性值和接口文档参数值一样
3.导入serialize.js 插件
4.对serialize 插件获取的表单值 解构使用

二、案例

2.1 图书管理

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

2.2 图片上传

image.png

image.png

2.3 网站换肤

image.png

2.4 个人信息设置

image.png

image.png

image.png

image.png

三、ajax原理-XMLHttpRequest

3.1 XMLHttpRequest

image.png

image.png

image.png

image.png

image.png

image.png

image.png

3.2 Promise

image.png

image.png

image.png

image.png

image.png

3.3 封装简易版 axios

image.png

3.4 案例 - 天气预报

image.png

image.png

image.png

四、AJAX进阶

image.png

4.1 同步代码、异步代码

image.png

image.png

image.png

4.2 回调函数地狱、Promise - 链式调用

image.png

image.png

image.png

image.png

image.png

promise对象链式应用 的then，“return”返回（创建）一个新的promise对象，下一个then用“result”接收新的promise对象的结构

image.png

4.3 async和await

image.png

image.png

4.4 事件循环-EventLoop

image.png

image.png

image.png

image.png

image.png

image.png

image.png

4.5 Promise.all静态方法

image.png

image.png

4.6 案例

image.png

image.png

image.png

五、前端项目-基于ajax的数据管理平台

补充技术： 富文本编辑器

image.png

image.png

image.png

image.png

表单批量回显

image.png

代码在本人github上，可自取。github.com/bingnuoer

avatar
文章
阅读
粉丝