网页前端开发（基础进阶4--axios）

news2025/6/7 18:51:58

Ajax

        Ajax(异步的JavaScript和XML) 。

        XML是可扩展标记语言，本质上是一种数据格式，可以用来存储复杂的数据结构。

        可以通过Ajax给服务器发送请求，并获取服务器响应的数据。

        Ajax采用异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想等等。

Axios

        Axios对原生的Ajax进行了封装，简化书写，快速开发。

步骤：

        1.引入Axios的js文件

        2.使用Axios的发送请求，并获取响应结果。

使用方法：

<script src="js/axios.js"></script>

<script>

    document.querySelector('#btnGet').addEventListener('click',function(){

      //axios发起异步请求

      axios({

        method:'GET'

        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',

      }).then((result)=>{//成功回调函数

        console.log(result)

      }).catch((error)=>{//失败回调函数

        console.log(error)

      })

    })

  })

</script>

method：请求方式，GET/POST

url：请求路径

data：请求数据（POST）

params：发送请求时携带的url参数。

        Axios的简化

axios.请求方式(url [,data[,config]])

示例

axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list')

      .then((result) => {

        console.log(result)

      }).catch((err) => {

        console.log(err)

      });

.then((result) => {

        console.log(result)

      }).catch((err) => {

        console.log(err)

      });

可以使用thenc快速生成。

具体代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3; /* 灰色背景 */
            
            display: flex; /* flex弹性布局 */
            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */
            align-items: center; /* 垂直居中 */
        }
        .navbar h1 {
            margin: 0; /* 移除默认的上下外边距 */
            font-weight: bold; /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }
        .navbar a {
            color: white; /* 链接颜色为白色 */
            text-decoration: none; /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px; /* 控件之间的间距 */
            margin: 20px 0;
        }
        .search-form input[type="text"], .search-form select {
            padding: 5px; /* 输入框内边距 */
            width: 260px; /* 宽度 */
        }
        .search-form button {
            padding: 5px 15px; /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd; /* 边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: center; /* 左对齐 */
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .avatar {
            width: 30px;
            height: 30px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #b5b3b3; /* 灰色背景 */
            color: white; /* 白色文字 */
            text-align: center; /* 居中文本 */
            padding: 10px 0; /* 上下内边距 */
            margin-top: 30px;
        }

        #container {
            width: 80%; /* 宽度为80% */
            margin: 0 auto; /* 水平居中 */
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#">退出登录</a>
        </div>
        
        <!-- 搜索表单区域 -->
        <form class="search-form">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">

            <label for="gender">性别：</label>
            <select id="gender" name="gender" v-model="searchForm.gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label for="position">职位：</label>
            <select id="position" name="position" 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" v-on: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"  v-bind:src="e.image" :alt="e.name"></td>

                    <!-- v-if: 控制元素的显示与隐藏 -->
                    <td>
                        <span v-if="e.job == 1">班主任</span>
                        <span v-else-if="e.job == 2">讲师</span>
                        <span v-else-if="e.job == 3">学工主管</span>
                        <span v-else-if="e.job == 4">教研主管</span>
                        <span v-else-if="e.job == 5">咨询师</span>
                        <span v-else>其他</span>
                    </td>

                    <td>{{e.entrydate}}</td>
                    <td>{{e.updatetime}}</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 页脚版权区域 -->
        <footer class="footer">
            <p>江苏传智播客教育科技股份有限公司</p>
            <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
        </footer>
    </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(){
                // 发送ajax请求，获取数据
                // axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {
                //     this.empList = result.data.data;
                // })
                // console.log('===========================');

                let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
                this.empList = result.data.data;
            },
            clear(){
                //清空表单项数据
                this.searchForm = {name:'', gender:'', job:''}
                this.search()
            }
        },
        //钩子函数
        mounted(){
            //页面加载完成之后，发送ajax请求，获取数据
            this.search()
        }
      }).mount('#container')
    </script>

</body>
</html>

实现了查询与清空功能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2403242.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

软件安全：漏洞利用与渗透测试剖析、流程、方法、案例

软件安全：漏洞利用与渗透测试剖析、流程、方法、案例

在数字时代&#xff0c;软件已深度融入生活与工作的方方面面&#xff0c;从手机应用到企业核心系统&#xff0c;软件安全至关重要。而漏洞利用与渗透测试&#xff0c;作为软件安全领域中相互关联的两个关键环节&#xff0c;一个是黑客攻击的手段&#xff0c;一个是安全防护的方…
阅读更多...
Haproxy的基础配置

Haproxy的基础配置

1、参考文档 官方文档&#xff1a;HAProxy version 2.2.22 - Configuration Manual 运维派配置手册&#xff1a;Haproxy-基础配置详解 - 运维派 Haproxy 的配置文件haproxy.cfg由两大部分组成&#xff0c;分别是global和proxies部分。 2、haproxy global 配置 global&…
阅读更多...
考研系列—操作系统：冲刺笔记（1-3章）

考研系列—操作系统：冲刺笔记（1-3章）

目录 第一章 计算机系统概述 1.基本概念 2.内核态和用户态 3.中断(外中断)、异常(内中断-与当前执行的) 4.系统调用 5.操作系统引导程序 2021年真题： 6.操作系统结构 大纲新增 (1)分层结构 (2)模块化 (3)外核 7.虚拟机 第二章 进程管理 1.画作业运行的顺序和甘…
阅读更多...
Java调用大模型API实战指南

Java调用大模型API实战指南

文章目录 前言调用大模型的流程概述和基本原理获取 DeepSeek 的 API keyJava 实现调用大模型 API 的Demo进阶扩展建议 前言 随着大语言模型&#xff08;如 OpenAI、DeepSeek、通义千问等&#xff09;的发展&#xff0c;我们可以很方便地用 API 接口调用这些强大的智能助手。在…
阅读更多...
单片机0-10V电压输出电路分享

单片机0-10V电压输出电路分享

一、原理图 二、芯片介绍 GP8101是一个PWM信号转模拟信号转换器&#xff0c;相当于一个PWM信号输入&#xff0c;模拟信号输出的DAC。此 芯片可以将占空比为0%到100%的PWM信号线性转换成0-5V或者0-10V的模拟电压&#xff0c;并且输出电压 精度小于1%。GP8101M可以处理高频调制的…
阅读更多...
大模型模型部署和暴露接口

大模型模型部署和暴露接口

创建环境 激活案件 安装相关依赖 conda create -n fastApi python3.10 conda activate fastApi conda install -c conda-forge fastapi uvicorn transformers pytorch pip install safetensors sentencepiece protobuf 新建文件夹 mkdir App cd App touch main.py 复制代码…
阅读更多...
2025服装收银系统推荐：智能管理助力服装商家高效经营

2025服装收银系统推荐：智能管理助力服装商家高效经营

在服装批发零售行业&#xff0c;一套高效的收银系统不仅能简化日常经营流程&#xff0c;还能通过数据分析帮助商家优化库存、提升销售。随着AI技术的普及&#xff0c;现代收银系统已不再局限于简单的记账功能&#xff0c;而是能提供智能选品、库存预警、精准营销等进阶服务。 …
阅读更多...
Microsoft Copilot Studio - 尝试一下Agent

Microsoft Copilot Studio - 尝试一下Agent

1.简单介绍 Microsoft Copilot Studio以前的名字是Power Virtual Agent(简称PVA)。Power Virutal Agent是2019年出现的&#xff0c;是低代码平台Power Platform的一部分。当时Generative AI还没有出现&#xff0c;但是基于已有的Conversation AI技术&#xff0c;即Microsoft L…
阅读更多...
【Python 算法零基础 4.排序 ⑨ 堆排序】

【Python 算法零基础 4.排序 ⑨ 堆排序】

目录 一、问题描述 二、算法对比 1.朴素算法 ① 数组模拟容器 ② 有序数组模拟容器 2.二叉堆 ① 二叉堆特点 ② 数组表示二叉树 ③ 堆 ④ 大顶堆 ⑤ 小顶堆 ⑥ 元素插入 ⑦ 获取堆顶 ⑧ 堆顶元素删除 三、代码分析 1.工具函数 2.调整大顶堆函数 Ⅰ、计算子节点索引 Ⅱ、找出最…
阅读更多...
Deepseek/cherry studio中的Latex公式复制到word中

Deepseek/cherry studio中的Latex公式复制到word中

需要将Deepseek/cherry studio中公式复制到word中&#xff0c;但是deepseek输出Latex公式&#xff0c;比如以下Latex代码段&#xff0c;需要通过Mathtype翻译才能在word中编辑。 $$\begin{aligned}H_1(k1) & H_1(k) \frac{1}{A_1} \left( Q_1 u_1(k) Q_{i1} - Q_2 u_2(k…
阅读更多...
32单片机——窗口看门狗

32单片机——窗口看门狗

1、WWDG的简介 WWDG&#xff1a;Window watchdog&#xff0c;即窗口看门狗 窗口看门狗本质上是能产生系统复位信号和提前唤醒中断的递减计数器 WWDG产生复位信号的条件&#xff1a; &#xff08;1&#xff09;当递减计数器值从0x40减到0x3F时复位&#xff08;即T6位跳变到0&a…
阅读更多...
IDEA 中 Undo Commit，Revert Commit，Drop Commit区别

IDEA 中 Undo Commit，Revert Commit，Drop Commit区别

一、Undo Commit 适用情况&#xff1a;代码修改完了&#xff0c;已经Commit了&#xff0c;但是还未push&#xff0c;然后发现还有地方需要修改&#xff0c;但是又不想增加一个新的Commit记录。这时可以进行Undo Commit&#xff0c;修改后再重新Commit。如果已经进行了Push&…
阅读更多...
DAY43打卡

DAY43打卡

浙大疏锦行 kaggle找到一个图像数据集&#xff0c;用cnn网络进行训练并且用grad-cam做可视化 进阶&#xff1a;并拆分成多个文件 fruit_cnn_project/ ├─ data/ # 存放数据集&#xff08;需手动创建&#xff0c;后续放入图片&#xff09; │ ├─ train/ …
阅读更多...
Leetcode 1892. 页面推荐Ⅱ

Leetcode 1892. 页面推荐Ⅱ

1.题目基本信息 1.1.题目描述 表&#xff1a; Friendship ---------------------- | Column Name | Type | ---------------------- | user1_id | int | | user2_id | int | ---------------------- (user1_id,user2_id) 是 Friendship 表的主键(具有唯一值的列的组合…
阅读更多...
进程——环境变量及程序地址空间

进程——环境变量及程序地址空间

目录 环境变量 概念 补充&#xff1a;命令行参数 引入 其它环境变量 理解 程序地址空间 引入 理解 虚拟地址存在意义 环境变量 概念 环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数。打个比方&#xff0c;就像你布置房间&#xff0c;这些参数就类…
阅读更多...
VR视频制作有哪些流程？

VR视频制作有哪些流程？

VR视频制作流程知识 VR视频制作&#xff0c;作为融合了创意与技术的复杂制作过程&#xff0c;涵盖从初步策划到最终呈现的多个环节。在这个过程中&#xff0c;我们可以结合众趣科技的产品&#xff0c;解析每一环节的实现与优化&#xff0c;揭示背后的奥秘。 VR视频制作有哪些…
阅读更多...
Ubuntu 系统部署 MySQL 入门篇

Ubuntu 系统部署 MySQL 入门篇

一、安装 MySQL 1.1 更新软件包 在终端中执行以下命令&#xff0c;更新系统软件包列表&#xff0c;确保安装的是最新版本的软件&#xff1a; sudo apt update 1.2 安装 MySQL 执行以下命令安装 MySQL 服务端&#xff1a; sudo apt install mysql-server 在安装过程中&…
阅读更多...
【MATLAB代码】制导——平行接近法，三维，目标是运动的，订阅专栏后可直接查看MATLAB源代码

【MATLAB代码】制导——平行接近法，三维，目标是运动的，订阅专栏后可直接查看MATLAB源代码

文章目录 运行结果简介代码功能概述运行结果核心模块解析代码特性与优势MATLAB例程代码调整说明相关公式视线角速率约束相对运动学方程导引律加速度指令运动学更新方程拦截条件判定运行结果 运行演示视频： 三维平行接近法导引运行演示 简介 代码功能概述 本代码实现了三维空…
阅读更多...
黑马Java面试笔记之 微服务篇（SpringCloud）

黑马Java面试笔记之 微服务篇（SpringCloud）

一. SpringCloud 5大组件 SpringCloud 5大组件有哪些&#xff1f; 总结 五大件分别有&#xff1a; Eureka&#xff1a;注册中心Ribbon&#xff1a;负载均衡Feign&#xff1a;远程调用Hystrix&#xff1a;服务熔断Zuul/Gateway&#xff1a;网关 如果项目用到了阿里巴巴&#xff…
阅读更多...
CLIP多模态大模型的优势及其在边缘计算中的应用

CLIP多模态大模型的优势及其在边缘计算中的应用

CLIP多模态大模型的优势及其在边缘计算中的应用 CLIP&#xff08;Contrastive Language-Image Pre-training&#xff09;模型&#xff0c;是OpenAI开发的一种多模态大模型。该模型通过对比学习的方式&#xff0c;在大规模图像-文本对上进行预训练&#xff0c;成功实现了图像和文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023