VUE 开发——AJAX学习(一)

一、AJAX入门和axios使用

1.AJAX定义:

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

2.使用axios

  1. 引入axios.js:https://unpkg.com/axios/dist/axios.min.js
  2. 使用axios函数
html 复制代码
<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选项。携带参数名和值

html 复制代码
 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:提交数据

html 复制代码
<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方法,传入回调函数并定义形参

html 复制代码
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})

        })
相关推荐
MicroTech20251 天前
微算法科技(MLGO)研发突破性低复杂度CFG算法,成功缓解边缘分裂学习中的掉队者问题
科技·学习·算法
不想上班只想要钱1 天前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
future14121 天前
MCU硬件学习
单片机·嵌入式硬件·学习
好奇龙猫1 天前
日语学习-日语知识点小记-构建基础-JLPT-N3阶段-二阶段(4):文法運用
学习
mtactor1 天前
投资理财学习笔记
笔记·学习·金融
岁月宁静1 天前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
浮游本尊1 天前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
立志成为大牛的小牛1 天前
数据结构——二十六、邻接表(王道408)
开发语言·数据结构·c++·学习·程序人生
Olrookie1 天前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
请你喝好果汁6411 天前
Conda_bashrc 初始化机制学习笔记
笔记·学习·conda