做挂件的网站,深圳网站优化效果,114黄页,wordpress 免费商业主题AJAX概念和axios使用
AJAX概念
AJAX就是使用XMLHttpRequest对象与服务器通信#xff0c;它可以使用JSON、XML、HTML和text文本等格式发送和接收数据#xff0c;AJAX最吸引人的就是它的异步特性#xff0c;也就是说它可以在不重新刷新页面的情况下与服务器通信#xff0c;…AJAX概念和axios使用
AJAX概念
AJAX就是使用XMLHttpRequest对象与服务器通信它可以使用JSON、XML、HTML和text文本等格式发送和接收数据AJAX最吸引人的就是它的异步特性也就是说它可以在不重新刷新页面的情况下与服务器通信交换数据或更新页面
axios
基于XMLHTTPRequest封装 语法 1.引入axios https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js !-- 引入axios.js文件 --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptconsole.log(axios)/script2.使用axios函数 传入配置对象 再用.then回调函数接收结果并做后续处理
axios({
url:‘目标资源地址
}).then((result){
//对服务器返回的数据做后续处理
})!-- 引入axios.js文件 --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptlet div document.querySelector(div)// 2.使用axios给提供的函数进行数据请求axios({url: https://hmajax.itheima.net/api/province}).then(// function(result){ // 在then回调函数中第一个参数就是我们服务端返回的数据结果 }// 箭头函数的写法result {console.log(result)console.log(result.data)console.log(result.data.list)// 把省份写回到页面//还可以使用结构获取所需数据 const {data:{list}}resultconst data result.data.listdiv.innerHTML data.join(br)})/scriptURL URL查询参数
浏览器提供给服务器的额外信息让服务器返回浏览器想要的数据
语法使用axios提供的params选项
注意axios在运行时把参数名和值会拼接到url?参数名值
axios({
url:目标资源地址
params:{
参数名值
}
}).then(
对服务器返回的数据做后续处理
)!-- 引入axios.js文件 --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptlet div document.querySelector(div)// 2.使用axios给提供的函数进行数据请求axios({url: https://hmajax.itheima.net/api/city,params: {pname: 北京}}).then(// function(result){ // 在then回调函数中第一个参数就是我们服务端返回的数据结果 }// 箭头函数的写法result {const { data: { list } } resultconsole.log(result)console.log(list)})/script请求方法和数据提交
请求方法对服务器资源要执行的操作 GET:获取数据 POST:数据提交 PUT:修改数据(全部) DELETE:删除数据 PATCH:修改数据(部分)
axios请求配置
url:请求的URL网址
method:请求的方法GET可以省略不区分大小写
data:提交数据错误处理
浏览器报错 axios报错 错误信息在错误对象中的response-data-message
axios错误处理
语法:在then方法的后面通过点语法调用catch方法传入回调函数并定义形参
axios({
//请求选项
}).then(result{
//处理数据
}).catch(error{
//处理错误
})HTTP协议-报文
请求报文(请求标头)
组成 1.请求行(第一行)请求方法URL协议 2.请求头(第2行到第11行)以键值对的格式携带的附加信息比如Content-Type(发送给后台的数据格式)(关注这个就可以) 3.空行分隔请求头空行之后市发送给服务器的资源 空行在新版本的浏览器中去掉了 载荷就是请求体 发送的数据json数据(json数据的键和值都用“ ”包裹)
XHR(网络资源请求)
请求报文(错误排查)
先打开控制台再执行操作 打开XHR打开所发送的这一条请求 先看请求标头检查请求方式和请求地址是否正确 再看请求体(请求载荷)
响应报文
HTTP协议规定了浏览器要发送及服务器返回内容的格式 响应报文服务器按照HTTP协议要求的格式返回给浏览器的内容 组成 1.响应行(状态行)协议、HTTP响应状态码、状态信息 2.响应头:以键值对的格式携带的附加信息比如Content-Type 3.空行:分隔响应头空行之后市服务器返回的资源 4.响应体返回的资源 预览是处理过的响应体 响应状态码(用来表明请求是否成功完成)
404服务器找不到资源 接口
接口文档
描述接口的文章
form-serialize插件
作用快速收集表单元素的值
//表单必须存在name属性
const dataserialize(document.querySelector(form) //不写参数的话得到的是一个键值的查询参数
const dataserialize(document.querySelector(form{hash:true}) //会得到一个对象格式的数据
const dataserialize(document.querySelector(form {hash:true,empty:true}) .//未输入的表单以控制代替而不是空对象能够获取为空的input可以判断是否有值
使用参考文章
