AJAX-day1：

小白一枚2号

已于 2024-07-06 20:29:19 修改

阅读量1.1k

点赞数 21

文章标签： ajax 前端 javascript

于 2024-07-05 22:58:38 首次发布

本文链接：https://blog.csdn.net/2303_79590957/article/details/140219597

版权

注：文件布局：

一、AJAX的概念：

AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活

二、AJAX的使用：

使用axios库，与服务器进行数据通信
1. 基于XMLHttpRequest封装，代码简单
2. Vue,React项目使用
学习XMLHttpRequest对象，了解AJAX底层原理

1.axios库的初步使用：

引入JS：https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js 或 https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js
1. ```
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
```

使用axios函数：axios全攻略 | 羸弱的小金鱼 (ykloveyxk.github.io)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
    <script>
        axios({
            url:'目标资源地址'
        }).then((result)=>{
            //对服务器返回的数据做后续处理
        })
    </script>
</body>
</html>

目标资源：http://hmajax.itheima.net/api/province：省份列表数据

2.使用URL进行参数查询：

URL后加 ?pname=河北省

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

axios({
                url: 'http://hmajax.itheima.net/api/area',
                params: {
                    pname: `${query1.value}`,// 参数1
                    cname: `${query2.value}` // 参数2
                }
            }).then((result) => {
                console.log(result.data.list);
                ul.innerHTML = result.data.list.map((x) => `<li>${x}</li>`).join('')
                console.log(result.data.list.map((x) => `<li>${x}</li>`));
            })

3.常用的请求方法与数据提交：

概念：对服务器资源要执行的操作

请求方法	操作
GET(get)	获取数据
POST(post)	提交数据
PUT(put)	修改数据（全部）
DELETE(delete)	删除数据
PATCH(patch)	修改数据（部分）

axios的请求配置：

url ：请求的URL网址

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

params：查询参数

data：提交的数据

//获取数据
axios({
            url: '目标资源地址',
            //method: 'get',
            params:{
                参数名:值
            }
        }).then((result) => {
            //对返回的数据的处理
        })

//提交数据        
axios({
            url: '目标资源地址',
            method: 'post',
            data: {
                参数名: 值
            }
        }).then((result) => {
            //对返回的数据的处理
        })

4.axios的错误处理：

服务器返回的信息：Uncaught大对象里的data

语法格式：

 axios({
            //请求项
        }).then(result=>{
            //处理数据
        }).catch(error=>{
            //处理错误
        })

三、HTTP协议：

1.请求报文：

HTTP协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

请求报文样例：

组成部分：

请求行：请求方法，URL，协议
请求头：以键值对格式携带的附加信息，例如：Content-Type（本次浏览器携带的内容类型）
空行：分割请求头和内容数据，空行后是内容数据（发给服务器的资源）
请求体：发送的资源

查看请求报文：

2.用请求报文排查错误：

&3 在浏览器中查看请求报文和响应报文_f12看请求和响应怎么看-CSDN博客

查看提交的信息，判断错误位置

3.响应报文：

HTTP协议：规定了浏览器发送及服务器返回内容的格式

响应报文：服务器按照HTTP协议要求的格式，发送给浏览器的内容

响应行（状态行）：协议，HTTP响应状态码（400表示响应失败）、状态信息
响应头：以键值对的格式携带的附加信息，如：Conttent-Type
空行：分割响应头
响应体：返回的资源

查看响应报文：

HTTP状态码：用来表明，请求是否成功

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

常见状态码：

200：成功

404：服务器找不到资源

四、接口文档：

接口文档：描述接口的文章

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

AJAXS接口：欢迎使用 - AJAX阶段 (apifox.com)

五、from-serialize插件的使用：

作用：快速地搜集表单元素的值

引入插件：form-serialize.js插件下载&引用-CSDN博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
</head>

<body>
    <form action="javascript" class="example">
        <input type="text" name="un">
        <input type="password" name="pw">
        <!-- <input type="button" class="btn" value="提交"> -->
    </form>
    <button class="btn">提交</button>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
    <script src="../from-serialize/from-serialize.js"></script>
    <script>
        const input = document.querySelector('.example')
        const btn = document.querySelector('.btn')
        btn.addEventListener('click', () => {
            let data = serialize(input, { hash: true, empty: true })
            console.log(data);
        })
    </script>
</body>

</html>

必须使用：

<form action="javascript" class="example">
        <input type="text" name="un">
        <input type="password" name="pw">
        <!-- <input type="button" class="btn" value="提交"> -->
    </form>

的格式

form用来确定区间

name是键名

value是值

其中：hash 设置获取的数据结构：

true：获取得到JS对象
false：获取得到查询字符串

empty 设置是否获取空值：

true：允许获取空值
false：bu获取空值

六、案例-整合登入：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.rtl.min.css">
    <style>
        .banner {
            width: 700px;
            height: 700px;
            margin: 20px auto;
        }

        .row {
            margin-bottom: 15px;
        }

        .alert {
            transition: all .5s;
        }

        .unshow {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="banner">
        <h1>欢迎-登入</h1>
        <div class="alert unshow" role="alert">
        </div>
        <form class="login-form">
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="username" class="col-form-label">用户名：</label>
                </div>
                <div class="col-auto">
                    <input type="text" id="username" name="username" class="form-control"
                        aria-describedby="passwordHelpInline">
                </div>
            </div>
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="password" class="col-form-label">密码：</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="password" name="password" class="form-control"
                        aria-describedby="passwordHelpInline">
                </div>
                <div class="col-auto">
                    <span id="passwordHelpInline" class="form-text">
                        Must be 6-20 characters long.
                    </span>
                </div>
            </div>
        </form>
        <button class="btn btn-primary">登入</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
    <script src="../from-serialize/from-serialize.js"></script>
    <script>
        // const un = document.querySelector('#username')
        // const pw = document.querySelector('#password')
        const input = document.querySelector('.login-form')
        const btn = document.querySelector('button')
        const alt = document.querySelector('.alert')

        function alertFn(msg, isSuccess) {
            alt.classList.remove('unshow')
            let bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
            alt.classList.add(bgStyle)
            alt.innerText = msg
            // alert('用户名或密码错误')

            setTimeout(function () {
                alt.classList.add('unshow')
                alt.classList.remove(bgStyle)
            }, 2000)
        }


        btn.addEventListener('click', () => {
            let data = serialize(input, { hash: true, empty: true })
            console.log(data);
            if (data.username.length < 8) {
                alertFn('用户名长度不能少于8位', 0)

                return //阻止代码继续执行
            }
            else if (data.password.length < 6) {
                alertFn('密码长度不能少于6位', 0)

                return //阻止代码继续执行
            }
            axios({
                url: 'https://hmajax.itheima.net/api/login',
                method: 'post',
                data: {
                    username: data.username,
                    password: data.password
                }
            }).then(result => {
                console.log(result);

                alertFn(result.data.message, 1)

            }).catch(error => {
                console.log(error);

                alertFn(error.response.data.message, 0)
            })
        })
    </script>
</body>

</html>

效果：

1.初始界面：