网页前端开发（基础进阶4--axios）
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>实现了查询与清空功能。
相关文章：
网页前端开发（基础进阶4--axios）
Ajax Ajax(异步的JavaScript和XML) 。 XML是可扩展标记语言，本质上是一种数据格式，可以用来存储复杂的数据结构。 可以通过Ajax给服务器发送请求，并获取服务器响应的数据。 Ajax采用异步交互：可以在不重新加载整个页面的情况下&am…...
软件安全：漏洞利用与渗透测试剖析、流程、方法、案例
在数字时代，软件已深度融入生活与工作的方方面面，从手机应用到企业核心系统，软件安全至关重要。而漏洞利用与渗透测试，作为软件安全领域中相互关联的两个关键环节，一个是黑客攻击的手段，一个是安全防护的方…...
Haproxy的基础配置
1、参考文档 官方文档：HAProxy version 2.2.22 - Configuration Manual 运维派配置手册：Haproxy-基础配置详解 - 运维派 Haproxy 的配置文件haproxy.cfg由两大部分组成，分别是global和proxies部分。 2、haproxy global 配置 global&…...
考研系列—操作系统：冲刺笔记（1-3章）
目录 第一章 计算机系统概述 1.基本概念 2.内核态和用户态 3.中断(外中断)、异常(内中断-与当前执行的) 4.系统调用 5.操作系统引导程序 2021年真题： 6.操作系统结构 大纲新增 (1)分层结构 (2)模块化 (3)外核 7.虚拟机 第二章 进程管理 1.画作业运行的顺序和甘…...
使用 Docker Compose 部署 Jenkins（LTS 版）持续集成环境
一、前言 Jenkins 是目前最流行的开源持续集成工具之一。本教程将手把手带你使用 Docker Compose 快速部署 Jenkins LTS（长期支持版本），同时保留数据持久化、Docker 命令转发等功能，适合用于生产或本地开发测试环境。 二、环境准…...
Java调用大模型API实战指南
文章目录 前言调用大模型的流程概述和基本原理获取 DeepSeek 的 API keyJava 实现调用大模型 API 的Demo进阶扩展建议 前言 随着大语言模型（如 OpenAI、DeepSeek、通义千问等）的发展，我们可以很方便地用 API 接口调用这些强大的智能助手。在…...
)
C#中的路由事件(Routed Events)
路由事件的基本概念 路由事件是WPF中特有的事件系统，它允许事件在可视化树中"路由"传递，具有以下特点： 事件路由方向： 冒泡(Tunneling)：从事件源向根元素传递 隧道(Bubbling)：从根元素向事件源…...
[蓝桥杯]通电
通电 题目描述 2015 年，全中国实现了户户通电。作为一名电力建设者，小明正在帮助一带一路上的国家通电。 这一次，小明要帮助 nn 个村庄通电，其中 1 号村庄正好可以建立一个发电站，所发的电足够所有村庄使用。 现在…...
单片机0-10V电压输出电路分享
一、原理图 二、芯片介绍 GP8101是一个PWM信号转模拟信号转换器，相当于一个PWM信号输入，模拟信号输出的DAC。此 芯片可以将占空比为0%到100%的PWM信号线性转换成0-5V或者0-10V的模拟电压，并且输出电压 精度小于1%。GP8101M可以处理高频调制的…...
从零开始，搭建一个基于 Django 的 Web 项目
🎯 主要步骤概述 1️⃣ 安装 Python 和 pip 2️⃣ 创建虚拟环境 3️⃣ 安装 Django 4️⃣ 创建 Django 项目 5️⃣ 运行开发服务器 6️⃣ 创建一个简单的应用（app） 7️⃣ 配置数据库并迁移 8️⃣ 创建超级用户（admin）…...
大模型模型部署和暴露接口
创建环境 激活案件 安装相关依赖 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服装收银系统推荐：智能管理助力服装商家高效经营
在服装批发零售行业，一套高效的收银系统不仅能简化日常经营流程，还能通过数据分析帮助商家优化库存、提升销售。随着AI技术的普及，现代收银系统已不再局限于简单的记账功能，而是能提供智能选品、库存预警、精准营销等进阶服务。 …...
Microsoft Copilot Studio - 尝试一下Agent
1.简单介绍 Microsoft Copilot Studio以前的名字是Power Virtual Agent(简称PVA)。Power Virutal Agent是2019年出现的，是低代码平台Power Platform的一部分。当时Generative AI还没有出现，但是基于已有的Conversation AI技术，即Microsoft L…...
【Python 算法零基础 4.排序 ⑨ 堆排序】
目录 一、问题描述 二、算法对比 1.朴素算法 ① 数组模拟容器 ② 有序数组模拟容器 2.二叉堆 ① 二叉堆特点 ② 数组表示二叉树 ③ 堆 ④ 大顶堆 ⑤ 小顶堆 ⑥ 元素插入 ⑦ 获取堆顶 ⑧ 堆顶元素删除 三、代码分析 1.工具函数 2.调整大顶堆函数 Ⅰ、计算子节点索引 Ⅱ、找出最…...
Deepseek/cherry studio中的Latex公式复制到word中
需要将Deepseek/cherry studio中公式复制到word中，但是deepseek输出Latex公式，比如以下Latex代码段，需要通过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…...
测试设计技术全解析：黑盒与白盒测试的七种武器与覆盖率指标
在软件开发的生命周期中，测试设计技术扮演着至关重要的角色，它直接影响着产品质量和用户体验。测试设计技术主要分为黑盒测试技术和白盒测试技术两大类，它们各有优势和适用场景。黑盒测试技术侧重于从用户视角验证软件功能是否符合需求&#…...
AWS中国区IAM相关凭证自行管理策略（只读CodeCommit版）
目标 需要从CodeCommit读取代码。除了设置AWS托管策略：AWSCodeCommitReadOnly。还需要自定义策略，让用户能够自行管理IAM自己的相关凭证。 IAM自定义策略 {"Version": "2012-10-17","Statement": [{"Sid": &…...
极限复习c++
一、核心语法必背 1. 指针 vs 引用（简答题高频） 区别指针引用定义存储地址的变量，可改指向变量的别名，绑定后不可改初始化可空（nullptr）、延迟初始化必须初始化，不能引用空值访问需解引用&…...
32单片机——窗口看门狗
1、WWDG的简介 WWDG：Window watchdog，即窗口看门狗 窗口看门狗本质上是能产生系统复位信号和提前唤醒中断的递减计数器 WWDG产生复位信号的条件： （1）当递减计数器值从0x40减到0x3F时复位（即T6位跳变到0&a…...
javascript中Cookie、BOM、DOM的使用
Cookie 在客户端存储小型文本数据（通常 ≤ 4KB），常用于会话管理、个性化设置等场景。 名称描述作用生命周期存储位置安全性会话 Cookie临时存储，浏览器关闭后自动删除会话管理、个性化设置浏览器关闭内存高持久 Cookie设置过期时…...
IDEA 中 Undo Commit，Revert Commit，Drop Commit区别
一、Undo Commit 适用情况：代码修改完了，已经Commit了，但是还未push，然后发现还有地方需要修改，但是又不想增加一个新的Commit记录。这时可以进行Undo Commit，修改后再重新Commit。如果已经进行了Push&…...
DAY43打卡
浙大疏锦行 kaggle找到一个图像数据集，用cnn网络进行训练并且用grad-cam做可视化 进阶：并拆分成多个文件 fruit_cnn_project/ ├─ data/ # 存放数据集（需手动创建，后续放入图片） │ ├─ train/ …...
Leetcode 1892. 页面推荐Ⅱ
1.题目基本信息 1.1.题目描述 表： Friendship ---------------------- | Column Name | Type | ---------------------- | user1_id | int | | user2_id | int | ---------------------- (user1_id,user2_id) 是 Friendship 表的主键(具有唯一值的列的组合…...
进程——环境变量及程序地址空间
目录 环境变量 概念 补充：命令行参数 引入 其它环境变量 理解 程序地址空间 引入 理解 虚拟地址存在意义 环境变量 概念 环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数。打个比方，就像你布置房间，这些参数就类…...
（4-point Likert scale）4 点李克特量表是什么
文章目录 4-point Likert scale 定义4-point Likert scale 的构成4-point Likert scale 的特点4-point Likert scale 的应用场景 4-point Likert scale 定义 4-point Likert scale（4 点李克特量表）是一种常用的心理测量量表，由美国社会心理学…...
亚矩阵云手机实测体验：稳定流畅背后的技术逻辑
最近在测试一款云手机服务时，发现亚矩阵的表现出乎意料地稳定。作为一个经常需要多设备协作的开发者，我对云手机的性能、延迟和稳定性要求比较高。经过一段时间的体验，分享一下真实感受，避免大家踩坑。 1. 云手机能解决什么问…...
VR视频制作有哪些流程？
VR视频制作流程知识 VR视频制作，作为融合了创意与技术的复杂制作过程，涵盖从初步策划到最终呈现的多个环节。在这个过程中，我们可以结合众趣科技的产品，解析每一环节的实现与优化，揭示背后的奥秘。 VR视频制作有哪些…...
NodeJS全栈WEB3面试题——P2智能合约与 Solidity
2.1 简述 Solidity 的数据类型、作用域、函数修饰符。 数据类型： 值类型（Value Types）：uint, int, bool, address, bytes1 到 bytes32, enum 引用类型（Reference Types）：array, struct, mappin…...
某水表量每15分钟一报，然后某天示数清0了，重新报示值了 ，如何写sql 计算每日水量
要计算每日电量，需处理电表清零的情况。以下是针对不同数据库的解决方案： 方法思路 识别清零点：通过比较当前值与前一个值，若当前值明显变小（如小于前值的10%），则视为清零。分段累计ÿ…...
Ubuntu 系统部署 MySQL 入门篇
一、安装 MySQL 1.1 更新软件包 在终端中执行以下命令，更新系统软件包列表，确保安装的是最新版本的软件： sudo apt update 1.2 安装 MySQL 执行以下命令安装 MySQL 服务端： sudo apt install mysql-server 在安装过程中&…...