JavaWeb前端03（Ajax概念及在前端开发时应用） - 详解

前言
一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了，但是我学习一直是针对后端开发的，前端也没太注重去学（他大部分都给课程资料嘻嘻），但我还是比较感兴趣，准备先把之前学JavaWeb（黑马程序员新推出的哦，视频讲的非常好可以去看看）时跳过的前端内容学一下，然后再用苍穹外卖前端内容补上。

学习了HTML、CSS，Javascript的基础内容，我们知道HTML负责网页的结构，而CSS负责的是网页的表现，而JavaScript让网页具备一定的交互效果，具有一定的动作行为,那么如果前端想要从后端接受信息怎么办？这就需要Ajax

就比如说我们接下来要实现的界面，里面的数据都需要储存在后端数据库，需要前端请求后端，才能显示：

先来看看什么是Ajax？

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

如果想更多了解，可以看看官网链接: https://www.axios-http.cn

来通过一个入门程序来看看Ajax怎么用

1. 先来来看看前端实现：

点击按钮返回数据到控制台：
https://mock.apifox.cn/m1/3083103-0-default/emps/list：这个链接是黑马程序员提供的，能提供数据用于联系

来看看代码吧：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Axios入门程序</title>
        </head>
        <body>
        <button id="getData">GET</button>
        <button id="postData">POST</button>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          <script>
            //GET请求
            document.querySelector('#getData').onclick = function() {
            axios({
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
            method:'get'
            }).then(function(res) {
            console.log(res.data);
            }).catch(function(err) {
            console.log(err);
            })
            }
            //POST请求
            document.querySelector('#postData').onclick = function() {
            axios({
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
            method:'post'
            }).then(function(res) {
            console.log(res.data);
            }).catch(function(err) {
            console.log(err);
            })
            }
          </script>
        </body>
      </html>

来分析一下这段代码吧

引入 Axios 库

<!-- 引入 Axios 库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

先加载 Axios，才能使用 axios() 发送请求。

// 1. 点击 GET 按钮，获取数据
document.querySelector('#getData').onclick = function() {
axios({
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list', // 请求地址
method: 'get' // 请求方法
})
.then(function(res) {
console.log(res.data);
// 成功：打印返回的数据
})
.catch(function(err) {
console.log(err);
// 失败：打印错误信息
});
}

Axios还针对不同的请求，提供了别名方式的api，具体格式如下：
axios.请求方式(url [, data [, config]])
具体如下：

最后我们基于axios动态加载员工列表数据

还是来看看前端界面，来了解一下案例：

进入页面是这样的（没有显示，以后会学钩子函数就会显示所有数据量了），在选项框中输入要查询的类别，点击查询后端就返回数据了：

来看看代码吧：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tlias智能学习辅助系统</title>
          <style>
            body {
            margin: 0;
            }
            /* 顶栏样式 */
            .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #c2c0c0;
            padding: 20px 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
            /* 加大加粗标题 */
            .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
            }
            /* 文本链接样式 */
            .header a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
            }
            /* 搜索表单区域 */
            .search-form {
            display: flex;
            align-items: center;
            padding: 20px;
            background-color: #f9f9f9;
            }
            /* 表单控件样式 */
            .search-form input[type="text"], .search-form select {
            margin-right: 10px;
            padding: 10px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 26%;
            }
            /* 按钮样式 */
            .search-form button {
            padding: 10px 15px;
            margin-left: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            }
            /* 清空按钮样式 */
            .search-form button.clear {
            background-color: #6c757d;
            }
            .table {
            min-width: 100%;
            border-collapse: collapse;
            }
            /* 设置表格单元格边框 */
            .table td, .table th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            }
            .avatar {
            width: 30px;
            height: 30px;
            object-fit: cover;
            border-radius: 50%;
            }
            /* 页脚版权区域 */
            .footer {
            background-color: #c2c0c0;
            color: white;
            text-align: center;
            padding: 10px 0;
            margin-top: 30px;
            }
            .footer .company-name {
            font-size: 1.1em;
            font-weight: bold;
            }
            .footer .copyright {
            font-size: 0.9em;
            }
            #container {
            width: 80%;
            margin: 0 auto;
            }
          </style>
        </head>
        <body>
            <div id="container">
            <!-- 顶栏 -->
                <div class="header">
              <h1>Tlias智能学习辅助系统</h1>
              <a href="#">退出登录</a>
              </div>
              <!-- 搜索表单区域 -->
                  <form class="search-form">
                  <input type="text" name="name" placeholder="姓名" v-model="searchForm.name" />
                    <select name="gender" v-model="searchForm.gender">
                  <option value="">性别</option>
                  <option value="1">男</option>
                  <option value="2">女</option>
                  </select>
                    <select name="job" 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 class="table table-striped table-bordered">
                  <thead>
                    <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(emp, index) in empList" :key="index">
                    <td>{{ emp.name }}</td>
                    <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
                    <td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td>
                      <!-- 基于v-if/v-else-if/v-else指令来展示职位这一列 -->
                        <td>
                        <span v-if="emp.job == '1'">班主任</span>
                        <span v-else-if="emp.job == '2'">讲师</span>
                        <span v-else-if="emp.job == '3'">学工主管</span>
                        <span v-else-if="emp.job == '4'">教研主管</span>
                        <span v-else-if="emp.job == '5'">咨询师</span>
                        <span v-else>其他</span>
                        </td>
                        <!-- 基于v-show指令来展示职位这一列 -->
                          <!-- <td>
                          <span v-show="emp.job === '1'">班主任</span>
                          <span v-show="emp.job === '2'">讲师</span>
                          <span v-show="emp.job === '3'">学工主管</span>
                          <span v-show="emp.job === '4'">教研主管</span>
                          <span v-show="emp.job === '5'">咨询师</span>
                          </td> -->
                        <td>{{ emp.entrydate }}</td>
                        <td>{{ emp.updatetime }}</td>
                            <td class="btn-group">
                          <button class="edit">编辑</button>
                          <button class="delete">删除</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- 页脚版权区域 -->
                        <footer class="footer">
                      <p class="company-name">江苏传智播客教育科技股份有限公司</p>
                      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
                      </footer>
                    <script src="https://unpkg.com/axios/dist/axios.min.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: {
                        search() {
                        //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
                        axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name
                        }&gender=${this.searchForm.gender
                        }&job=${this.searchForm.job
                        }`).then(res =>
                        {
                        this.empList = res.data.data
                        })
                        },
                        clear() {
                        this.searchForm= {
                        name: '',
                        gender: '',
                        job: ''
                        }
                        }
                        }
                        }).mount('#container')
                      </script>
                    </div>
                  </body>
                </html>

Vue 3 脚本逻辑（核心）：

<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: {
  search() {
  axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name
  }&gender=${this.searchForm.gender
  }&job=${this.searchForm.job
  }`)
  .then(res =>
  {
  this.empList = res.data.data
  })
  },
  clear() {
  this.searchForm = {
  name: '', gender: '', job: ''
  }
  }
  }
  }).mount('#container')
</script>

✅ data()：定义响应式数据

searchForm：保存搜索条件（姓名、性别、职位）
empList：保存从服务器获取的员工列表数据（初始为空）

✅ methods：定义方法

search() ：发送 Ajax 请求获取员工列表
- 使用 Axios 发送 GET 请求到后端 API。
- 把搜索条件拼接到 URL 参数中。
- 请求成功后，将返回的数据（res.data.data）赋值给 empList，Vue 会自动更新表格。
clear() ：清空搜索条件
当用户点击“清空”按钮时，clear() 方法会执行：它把 searchForm 对象重新设置为初始状态（所有字段都为空字符串）。

小白啊！！！写的不好轻喷啊如果觉得写的不好，点个赞吧（批评是我写作的动力）

…。。。。。。。。。。。…

posted @ 2025-08-23 12:10 yjbjingcha 阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

JavaWeb前端03（Ajax概念及在前端开发时应用） - 详解

先来看看什么是Ajax？

来通过一个入门程序来看看Ajax怎么用

最后我们基于axios动态加载员工列表数据

公告