1.AJAX
概念:AJAX是浏览器于服务器进行数据通信的技术
axios使用
语法:1.引入axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2.使用axios函数
——传入配置对象
——再用.then回调函数接收结果,并做后续处理
axios({
url:'目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})
URL是统一资源定位符,网址,用于访问服务器上资源(协议//域名/资源路径)
2.axios-查询参数
作用是浏览器提供给服务器额外信息,获取对应的数据
语法:使用axios提供的params选项
主要:axios在运行时把参数名和值,会拼接到url ?参数名=值
axios({
url:'目标资源地址',
params:{参数名:值}
}).then((result)=>{
//对服务器返回的数据做后续处理
})
3.常用的请求方法
请求方法 | 操作 |
GET | 获取数据 |
POST | 提交数据 |
PUT | 修改数据(全部) |
DELETE | 删除数据 |
PATCH | 修改数据(部分) |
4.axios请求配置
url:请求的URL网址
method:请求的方法,GET可以省略(不区分大小写)
data:提交数据
axios({
url:'目标资源地址',
method:'请求方法',
data:{参数名:值}
}).then((result)=>{
//对服务器返回的数据做后续处理
})
5.axios错误处理
语法:在then方法的后面,通过点语法调用catch方法 ,传入回调函数并定义形参
axios({
//请求选项
}).then((result)=>{
//处理数据
}).catch(error=>{
//处理错误
})
6.请求报文的格式
浏览器发送给服务器的内容叫做请求报文
请求报文的组成部分有:
(1)请求行:请求方法,URL,协议
(2)请求头:以键值对的格式携带的附加信息,比如:Content-Type
(3)空行:分隔请求头,空行之后的是发送给服务器的资源
(4)请求体:发送的资源
7.响应报文的格式
服务器按照HTTP协议要求的格式,返回给浏览器的内容叫做响应报文
响应报文的组成部分有:
(1)响应行(状态行):协议,HTTP响应状态码,状态信息
(2)响应头:以键值对的格式携带的附加信息,比如:Content-Type
(3)空行:分隔响应头,空行之后的是服务器返回的资源
(4)响应体:返回的资源
8.HTTP响应状态码
HTTP响应状态码:用来表面请求是否成功
状态码 | 说明 |
1xx | 信息 |
2xx | 成功 |
3xx | 重定向消息 |
4xx | 客户端错误 |
5xx | 服务端错误 |
9.接口文档
接口文档:描述接口的文章
接口:使用AJAX和服务器通讯时,使用的URL,请求方法,以及参数
10.form-seralize插件
作用:快速收集表单元素的值
//语法:
serialize(from表单,{hash:true,empty:true})
//hsah:设置获取数据结构
//hash->true:JS对象
//hash->false:查询字符串
//empty:设置是否获取空值
链接:https://www.npmjs.com/package/form-serialize
11.Bootstrap弹框
功能:不离开当前页面,显示单独内容,供用户操作