AJEX（不完整需要重新写）

Ajax 和 Axios Ajax 概念 概述： Ajax（Asynchronous JavaScript And XML）是一种异步通信技术，可以在不刷新页面的情况下与服务器进行数据交换。 特点 说明 异步请求 不会阻塞页面加载，用户体验更好 局部刷新 只更新页面的部分内容，而不是整个页面 数据格

Ajax 和 Axios

Ajax 概念

概述： Ajax（Asynchronous JavaScript And XML）是一种异步通信技术，可以在不刷新页面的情况下与服务器进行数据交换。

特点说明
异步请求不会阻塞页面加载，用户体验更好
局部刷新只更新页面的部分内容，而不是整个页面
数据格式支持 XML、JSON、文本等多种数据格式

Axios 介绍

概述： Axios 是基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js，比原生 Ajax 更简洁易用。

<!-- 引入 Axios 库 -->
<script src="js/axios.js"></script>
优势说明
语法简洁比原生 XMLHttpRequest 更易用
Promise 支持支持 then/catch 链式调用
请求/响应拦截可以统一处理请求和响应

Axios 基础语法

概述： Axios 提供多种请求方式，支持配置对象和简化方法。

// 配置对象方式
axios({
    method: 'GET',  // 请求方式：GET/POST
    url: 'https://api.example.com/data',  // 请求路径
    data: 'id=1',  // 请求数据(POST)
    params: { key: 'value' }  // URL 参数 (...?key=value)
}).then((result) => {
    // 成功回调函数
    console.log(result);
}).catch((err) => {
    // 失败回调函数
    console.log(err);
});
配置项说明用途
method请求方式GET/POST/PUT/DELETE
url请求路径API 接口地址
data请求数据POST 请求的请求体
paramsURL 参数拼接到 URL 后的查询参数

Axios GET 请求

概述： 发送 GET 请求获取数据，支持简化语法。

// 方式一：配置对象
axios({
    url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
    method: 'GET'
}).then((result) => {
    console.log(result.data);
});

// 方式二：简化语法
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list')
    .then((result) => {
        console.log(result.data);
    });
写法说明
配置对象完整配置，适合复杂请求
简化语法axios.get(url) 更简洁

Axios POST 请求

概述： 发送 POST 请求提交数据到服务器。

// 方式一：配置对象
axios({
    url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
    method: 'POST',
    data: 'id=1'  // POST 请求体数据
}).then((result) => {
    console.log(result.data);
});

// 方式二：简化语法
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1')
    .then((result) => {
        console.log(result.data);
    });
参数说明
第一个参数请求 URL
第二个参数请求体数据

异步处理

概述： Ajax 是异步的，不会阻塞代码执行。可以使用 async/await 转换为同步写法。

// 异步执行示例
document.querySelector('#btnGet').addEventListener('click', () => {
    axios.get('https://api.example.com/data')
        .then((result) => {
            console.log(result.data);
        });
    console.log('这行代码先执行'); // 先输出这个
});

// async/await 同步写法
async function getData() {
    try {
        let result = await axios.get('https://api.example.com/data');
        console.log(result.data);
    } catch (error) {
        console.log(error);
    }
}
写法特点
Promise 链异步执行，代码继续往下运行
async/await看起来像同步，但仍是异步

Vue + Axios 完整示例

概述： 结合 Vue3 使用 Axios 实现员工管理系统，包含查询、清空、数据绑定等功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
        }
        
        .navbar h1 {
            margin: 0;
            font-weight: bold;
            color: white;
            font-family: "楷体";
        }
        
        .search-form {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 20px 0;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        
        .avatar {
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="container">
        <!-- 导航栏 -->
        <div class="navbar">
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#">退出登录</a>
        </div>

        <!-- 搜索表单 -->
        <form class="search-form">
            <label>姓名：</label>
            <input type="text" v-model="searchForm.name" placeholder="请输入姓名">
            
            <label>性别：</label>
            <select v-model="searchForm.gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label>职位：</label>
            <select v-model="searchForm.job">
                <option value=""></option>
                <option value="1">班主任</option>
                <option value="2">讲师</option>
                <option value="3">学工主管</option>
                <option value="4">教研主管</option>
                <option value="5">咨询师</option>
            </select>
            
            <button type="button" @click="search">查询</button>
            <button type="button" @click="clear">清空</button>
        </form>

        <!-- 数据表格 -->
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(e, index) in empList" :key="e.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ e.name }}</td>
                    <td>{{ e.gender == 1 ? '男' : '女' }}</td>
                    <td><img class="avatar" :src="e.image" :alt="e.name"></td>
                    <td>
                        <span v-show="e.job == 1">班主任</span>
                        <span v-show="e.job == 2">讲师</span>
                        <span v-show="e.job == 3">学工主管</span>
                        <span v-show="e.job == 4">教研主管</span>
                        <span v-show="e.job == 5">咨询师</span>
                    </td>
                    <td>{{ e.entrydate }}</td>
                    <td>{{ e.updatetime }}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="js/axios.js"></script>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            data() {
                return {
                    // 搜索条件数据模型
                    searchForm: {
                        name: '',
                        gender: '',
                        job: ''
                    },
                    // 员工列表数据
                    empList: []
                }
            },
            methods: {
                // 搜索员工数据
                async search() {
                    const { name, gender, job } = this.searchForm;
                    let result = await axios.get(
                        `https://web-server.itheima.net/emps/list?name=${name}&gender=${gender}&job=${job}`
                    );
                    this.empList = result.data.data;
                },
                
                // 清空搜索条件
                clear() {
                    this.searchForm = {
                        name: '',
                        gender: '',
                        job: ''
                    };
                }
            },
            
            // 页面挂载完成后自动加载数据
            mounted() {
                this.search();
            }
        }).mount('#container')
    </script>
</body>
</html>
功能实现技术要点
双向数据绑定v-model 绑定表单输入
条件渲染v-show 控制职位显示
列表渲染v-for 循环显示员工数据
事件绑定@click 绑定查询和清空事件
属性绑定:src 动态绑定图片路径
生命周期mounted 页面加载完成后执行
异步请求async/await 处理 Axios 请求
评论