VUE 开发——AJAX学习（一）

最新推荐文章于 2024-09-29 17:29:37 发布

sooRiverling

最新推荐文章于 2024-09-29 17:29:37 发布

阅读量820

点赞数 10

分类专栏： AJAX VUE 前端文章标签： vue.js ajax 学习

本文链接：https://blog.csdn.net/weixin_74113429/article/details/142498406

版权

前端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

AJAX

3 篇文章 0 订阅

订阅专栏

一、AJAX入门和axios使用

1.AJAX定义：

异步的javascript和XML，就是使用XMLHttp Request对象与服务器通信，浏览器和服务器进行数据交换的技术。

2.使用axios

引入axios.js：https://unpkg.com/axios/dist/axios.min.js
使用axios函数

<body>
    <p class="my-p"></p>
    <!-- 
        1.引入axios库
    -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //2.使用axios函数
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(result => {
            console.log(result)
            //控制台拿到result的省份对象
            console.log(result.data.list)
            //拼接数组元素
            console.log(result.data.list.join('<br>'))
            //把准备好的省份列表插入到页面
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })
    </script>
</body>

效果展示：

二、认识URL

1.定义：统一资源定位符，简称网址，用于访问网络上的资源

2.组成：协议、域名、资源路径

URL：协议://域名/资源路径

http://hmajax.itheima.net/api/province

1. 协议：http

2.域名：hmajax.itheima.net

域名：标记服务器在互联网中的方位，必须添加

3.资源路径：/api/province

3.URL查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios查询参数

使用params选项。携带参数名和值

 axios({
            url: 'http://hmajax.itheima.net/api/city',
            //查询参数格式
            params:{
                pname:'河南省'
            }
        }).then(result => {
            console.log(result）
        }
})

三、常用请求方法和数据提交

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

请求方法	操作
get	获取数据
post	提交数据
put	修改数据（全部）
delete	删除数据
patch	修改数据（部分）

axios请求配置：

url：请求的url网址

method：请求的方法，get可以省略（不区分大小写）

data：提交数据

<body>
    <button class="btn">注册用户</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector('.btn').addEventListener(
            'click',() => {
                axios({
                    url: 'http://hmajax.itheima.net/api/register',
                    //指定请求方法
                    method: 'post',
                    //提交数据
                    data: {
                        username: 'user',
                        password: '123'
                    }
                }).then(result => {
                    console.log(result)
                })

            }

        )
        
    </script>
</body>

四、axios错误处理

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

axios({
                    url: 'http://hmajax.itheima.net/api/register',
                    //指定请求方法
                    method: 'post',
                    //提交数据
                    data: {
                        username: 'user',
                        password: '123'
                    }
                }).then(result => {
                    console.log(result)
                }).catch(error => {
                    //处理错误信息
                    console.log(error)
                    //具体错误原因
                    console.log(error.response.data.message)
                    alert(error.response.data.message)
                })

五、HTTP协议

1.请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容，可以在网络中查看。

请求报文——错误排查

2.响应报文：规定了浏览器发送以及服务器返回内容的格式

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

404:服务器找不到资源

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

六、接口文档

接口文档：由后端提供的描述接口的文章

接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数

七、form-serialize使用

form-serialize插件：快速收集表单元素的值

 document.querySelector('.btn').addEventListener('click',() => {
            /*
                参数1:要获取哪个表单的数据
                参数2:配置对象
                hash 设置获取数据结构 ——true：JS对象（推荐，一般请求体里提交给服务器） ；                    false：查询字符串
                empty 设置是否获取空值
            */

            const form = document.querySelector('.example-form')
            const data = serialize(form,{ hash: true,empty: true})

        })