0
点赞
收藏
分享

微信扫一扫

AJAX概念和axios使用、URL、请求方法和数据提交、HTTP协议、接口、form-serialize插件

飞进科技 03-18 10:30 阅读 2

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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        console.log(axios)
    </script>

在这里插入图片描述

2.使用axios函数
传入配置对象
再用.then回调函数接收结果,并做后续处理

axios({
url:‘目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})
  <!-- 引入axios.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

        let 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}}=result
                const data = result.data.list
                div.innerHTML = data.join('<br>')
            }

        )
    </script>

在这里插入图片描述

在这里插入图片描述

URL

在这里插入图片描述

URL查询参数

浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:使用axios提供的params选项
注意:axios在运行时把参数名和值,会拼接到url?参数名=值
axios({
url:'目标资源地址',
params:{
参数名:值
}
}).then(
对服务器返回的数据做后续处理
)
    <!-- 引入axios.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

        let div = document.querySelector('div')
        // 2.使用axios给提供的函数,进行数据请求
        axios({
            url: 'https://hmajax.itheima.net/api/city',
            params: {
                pname: '北京'
            }
        }).then(
            // function(result){  // 在then回调函数中,第一个参数就是我们服务端返回的数据结果   }
            // 箭头函数的写法
            result => {
                const { data: { list } } = result
                console.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 data=serialize(document.querySelector('form')   //不写参数的话得到的是一个键=值的查询参数
const data=serialize(document.querySelector('form',{hash:true})  //会得到一个对象格式的数据
const data=serialize(document.querySelector('form' {hash:true,empty:true})  .//未输入的表单以控制代替,而不是空对象,能够获取为空的input,可以判断是否有值


使用:参考文章

举报

相关推荐

0 条评论