AJAX-URL/HTTP/form-serialize 插件

一.AJAX 概念和 axios 使用

AJAX 是浏览器与服务器进行数据通信的技术

axios 使用

语法：
引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
使用 axios 函数
传入配置对象
再用 .then 回调函数接收结果，并做后续处理

axios({

url:‘目标资源地址’,

params:{参数名:值}

}).then(result=> {

//对服务器返回的数据做后续处理

})

二.URL(统一资源定位符)

概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源

URL 主要的作用:

标识资源在互联网上的具体地址

组成:

(1)协议

http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

(2)域名

标记服务器在互联网中方位

(3)资源路径

标记资源在服务器下的具体位置

三.URL 查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

语法：使用 axios 提供的 params 选项
注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值

axios({

url:‘目标资源地址’,

params:{参数名:值}

}).then(result=> {

//对服务器返回的数据做后续处理

})

四.常用请求方法和数据提交

数据提交

请求方法：对服务器资源，要执行的操作

url：请求的 URL 网址
method：请求的方法，GET可以省略（不区分大小写）
data：提交数据

语法:

axios({

url:‘目标资源地址’,

method:‘POST’,

data:{参数名:值}

}).then(result=>{

//对服务器返回的数据做后续处理

})

请求方法	操作
GET	获取数据
POST	数据提交
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

axios 错误处理

语法：在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参

axios({//请求选项})

.then(result=>{//处理数据})

.catch(error=>{//处理错误})

五.HTTP协议-报文

HTTP 协议：规定了浏览器发送及服务器返回内容的格式

HTTP 协议－请求报文

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

请求报文的组成部分有:
请求行：请求方法，URL，协议
请求头：以键值对的格式携带的附加信息，比如：Content-Type
空行：分隔请求头，空行之后的是发送给服务器的资源
请求体：发送的资源

HTTP 协议－响应报文

响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容
响应行（状态行）：协议、HTTP 响应状态码、状态信息
响应头：以键值对的格式携带的附加信息，比如：Content-Type
空行：分隔响应头，空行之后的是服务器返回的资源
响应体：返回的资源

HTTP 响应状态码：用来表明请求是否成功完成

状态码	说明
1xx	信息
2xx	成功
3xx	重定向消息
4xx	客户端错误
5xx	服务端错误

六.接口文档

接口文档：描述接口的文章(后端给我们的)
接口：使用 AJAX 和服务器通讯时，使用的 URL，请求方法，以及参数

七.form-serialize 插件

作用：快速收集表单元素的值

serialize(表单DOM元素,{hash:true(转对象/转字符串),empty:true(是否收集空值)})