当前位置：首页 > news >正文

AJAX-day1：

news 2025/11/2 15:16:32

注：文件布局：

一、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}`,// 参数1cname: `${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.初始界面：

2.直接登入时或用户名长度少于8位时（直接点提交）：

3.无密码时或密码少于6位时（用户名为 : itheima007）：

4.登入失败时：

5.成功登入（用户名：itheima007 密码：7654321）：

AJAX-day1：

注：文件布局： 一、AJAX的概念： AJAX是浏览器与服务器进行数据通信的技术 >把数据变活二、AJAX的使用： 使用axios库，与服务器进行数据通信基于XMLHttpRequest封装，代码简单 Vue,React项目使用学习…...

编程日记 2024/7/6 0:30:11

昆虫学（书籍学习资料）

包括昆虫分类（上下册）、昆虫生态大图鉴等书籍资料。...

编程日记 2024/7/6 0:28:10

参考的b站博主写的配置文件: spring:datasource:db1:jdbc-url: jdbc:mysql://localhost:3306/interview_database?useUnicodetrue&characterEncodingutf-8&useSSLfalseusername: rootpassword: 12345driver-class-name: com.mysql.cj.jdbc.Driverdb2:jdbc-url: jdbc…...

编程日记 2024/7/6 0:27:09

windows电脑网络重置后wifi列表消失怎么办？

我们的电脑网络偶尔会出现异常，我们通常会下意识选择网络诊断，运行完诊断后一般会让我们选择重置网络，然而，重置后wifi列表突然消失，无法愉快地上网了，找了一圈，都说是更改适配器选项&#xff0…...

编程日记 2024/7/6 0:26:08

Python + 在线 + 文生音，音转文（中文文本转为英文语音，语音转为中文文本）

开源模型平台：https://huggingface.co/ars-语言转文本: pipeline("automatic-speech-recognition", model"openai/whisper-large-v3", device0 ) hf: https://huggingface.co/openai/whisper-large-v3 github: https://github.com/openai/wh…...

编程日记 2024/7/6 0:25:07

哏号分治，CF103D - Time to Raid Cowavans

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 103D - Time to Raid Cowavans 二、解题报告 1、思路分析想了半天数据结构最终选择根号分治我们考虑大于 550 的公差直接暴力小于550 的公差的所有询问，我们直接计算该公差后缀和&#xf…...

编程日记 2024/7/6 0:24:06

基于深度学习的图像背景剔除

在过去几年的机器学习领域，我一直想打造真正的机器学习产品。几个月前，在参加了精彩的 Fast.AI 深度学习课程后，似乎一切皆有可能，我有机会：深度学习技术的进步使许多以前不可能实现的事情成为可能，而且开…...

编程日记 2024/7/6 0:23:04

Python使用(...)连接字符串

Python 字符串连接的灵活性。使用括号来组织多行字符串时的自动拼接。 e e var_str g*3connect_str (fa{e}bcvar_strh )print(connect_str) print(type(connect_str)) 运行结果： aebcgggh <class str> 解释： 定义变量： e e:…...

编程日记 2024/7/6 0:20:01

鸿蒙：1.入门

概述简介鸿蒙操作系统（HarmonyOS）是华为公司发布的一款智能终端系统，是基于微内核的面向全场景的分布式操作系统。它致力于提供更加安全、高效、低延迟、低功耗的操作体验，可通过技术手段对应用程序和设备进行智能协同&#xf…...

编程日记 2024/7/6 0:19:00

【matlab】智能优化算法——求解目标函数

智能优化算法在求解目标函数方面发挥着重要作用，它通过迭代、筛选等方法来寻找目标函数的最优值（极值）。以下是关于智能优化算法求解目标函数的详细介绍： 一、智能优化算法概述智能优化算法是一种搜索算法，旨在通过…...

编程日记 2024/7/6 0:15:58

不改代码，实现web.config或app.config的连接字符串加密解密

目的：加密字符串，防止明文显示。好处：不用修改代码，微软自带功能，自动解密。 web.config 参考相关文章： Walkthrough: Encrypting Configuration Information Using Protected Configuration | Microso…...

编程日记 2024/7/6 0:13:55

Python创建MySQL数据库

一、使用Docker部署本地MySQL数据库 docker run --restartalways -p 3307:3306 --name mysql -e MYSOL_ROOT_PASSWORDlms123456 -d mysql:8.0.25 参数解析: 用户名:root 密码:lms123456 端口:3307 二、在Pycharm开发工具中配置连接MySQL数据库三、安装zdppy_mysql pip inst…...

编程日记 2024/7/6 0:12:54

【C++】unordered系列容器的封装

你很自由充满了无限可能这是很棒的事我衷心祈祷你可以相信自己无悔地燃烧自己的人生 -- 东野圭吾《解忧杂货店》 unordered系列的封装 1 unordered_map 和 unordered_set2 改造哈希桶2.1 模版参数2.2 加入迭代器 3 上层封装3.1 unordered_set3.2 unordered_map 4 面…...

编程日记 2024/7/6 0:11:53

matlab 超越椭圆函数图像绘制

matlab 超越椭圆函数图像绘制超越椭圆函数图像绘制xy交叉项引入斜线负向斜线成分正向斜线成分 x^2 y^2 xy 1 （负向）绘制结果 x^2 y^2 - xy 1 （正向）绘制结果超越椭圆函数图像绘制 xy交叉项引入斜线相对于标准圆&#xf…...

编程日记 2024/7/6 0:10:52

本地文件同步上传到Gitee远程仓库

1、打开我们的项目所在文件夹 2、在项目文件夹【鼠标右击】弹出菜单，在【鼠标右击】弹出的菜单中，点击【Git Bash Here】，弹出运行窗口（前提条件是已装好git环境） 3、在命令窗口中输入：git init 4、在 Gite…...

编程日记 2024/7/6 0:09:51

RESTful Web 服务详解

RESTful Web 服务是一种基于 Representational State Transfer (REST) 架构风格的 Web 服务，它利用 HTTP 协议来传输数据，支持多种数据格式如 JSON 和 XML。在 Spring 框架中，通过简单配置和注解可以轻松实现 RESTful Web 服务。在本文中&…...

编程日记 2024/7/6 0:08:50

【ARMv8/v9 GIC 系列 5.3 -- 系统寄存器对中断的处理】

请阅读【ARM GICv3/v4 实战学习】文章目录 ARMv8/v9系统寄存器对中断的控制Group 0中断的寄存器Group 1中断的寄存器安全状态与中断分组中断处理过程中断确认处理代码中断完成处理代码ARMv8/v9系统寄存器对中断的控制在ARM GIC 体系结构中，中断分组通过一系列系统寄存器进…...

编程日记 2024/7/6 0:07:48

MUNIK解读ISO26262--系统架构

功能安全之系统阶段-系统架构我们来浅析下功能安全系统阶段重要话题——“系统架构” 目录概览： 系统架构的作用系统架构类型系统架构层级的相关安全机制梳理 1.系统架构的作用架构的思维包括抽象思维、分层思维、结构化思维和演化思维。通过将复杂系统分解…...

编程日记 2024/7/6 0:06:46

STM32第十五课：LCD屏幕及应用

文章目录需求一、LCD显示屏二、全屏图片三、数据显示1.显示欢迎词2.显示温湿度3.显示当前时间四、需求实现代码需求 1.在LCD屏上显示一张全屏图片。 2.在LCD屏上显示当前时间，温度，湿度。一、LCD显示屏液晶显示器，简称 LCD(Liquid Cry…...

编程日记 2024/7/6 0:04:44

Java--继承

1.继承的本质是对某一批类的抽象，从而实现对世界更好的建模 2.extends的意思是“扩展”，子类是父亲的扩展 3.Java中只有单继承，没有多继承 4.继承关系的两个类，一个为子类（派生类），一个为父类…...

编程日记 2024/7/6 0:01:39

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/10/30 15:52:04

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端目录技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/10/19 17:15:36

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。本期公布试题111~120 试题1…...

编程新知 2025/10/30 7:08:18

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言今天的每一份坚持，都是在为未来积攒底气。案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...

编程新知 2025/11/2 8:56:40

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路： 分别把 tabledata 和表尾相关数据 console.log() 发现更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/10/26 15:36:38

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2025/10/30 18:23:54

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源，提供了很全面的思路，减少了很多基础性的开发研究我看的阅读的是中南大学FYT战队开源视觉代码链接：https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架： 代码框架结构：readme有…...

编程新知 2025/10/28 22:40:13