AJAX——接口文档
1 接口文档
接口文档：描述接口的文章
接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数
传送门：AJAX阶段接口文档
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>接口文档</title>
</head><body><button class="btn">用户登录</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 用户注册// axios({// url: 'http://hmajax.itheima.net/api/register',// method: 'post',// data: {// username: 'itheima007',// password: '7654321'// }// })document.querySelector('.btn').addEventListener('click', () => {// 用户登录axios({url: 'http://hmajax.itheima.net/api/login',method: 'post',data: {username: 'itheima007',password: '7654321'}})})</script>
</body></html>2 案例-用户登录
1.点击登录时，判断用户名和密码长度
2.提交数据和服务器通信
3.提示信息
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_登录</title><!-- 引入bootstrap.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"><!-- 公共 --><style>html,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}</style><!-- 表单容器和内容 --><style>.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}</style><!-- 提示框样式 --><style>.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}</style>
</head><body><div class="container"><h3>欢迎-登录</h3><!-- 登录结果-提示框 --><div class="alert alert-success" role="alert">提示消息</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 1.1 登录-点击事件document.querySelector('.btn-login').addEventListener('click', () => {// 1.2 获取用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// console.log(username, password)// 1.3 判断长度if (username.length < 8) {console.log('用户名必须大于等于8位')return // 阻止代码继续执行}if (password.length < 6) {console.log('密码必须大于等于6位')return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log('提交数据到服务器')axios({url: 'http://hmajax.itheima.net/api/login',method: 'POST',data: {username,password}}).then(result => {console.log(result)console.log(result.data.message)}).catch(error => {console.log(error)console.log(error.response.data.message)})})</script>
</body></html>3 案例-登录-提示消息
1.点击登录时，判断用户名和密码长度
2.提交数据和服务器通信
3.提示信息
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_登录_提示消息</title><!-- 引入bootstrap.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"><!-- 公共 --><style>html,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}</style><!-- 表单容器和内容 --><style>.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}</style><!-- 提示框样式 --><style>.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}</style>
</head><body><div class="container"><h3>欢迎-登录</h3><!-- 登录结果-提示框 --><div class="alert alert-success" role="alert">提示消息</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 目标2：使用提示框，反馈提示消息// 2.1 获取提示框const myAlert = document.querySelector('.alert')/*** 2.2 封装提示框函数，重复调用，满足提示需求* 功能：* 1. 显示提示框* 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）* 3. 过2秒后，让提示框自动消失*/function alertFn(msg, isSuccess) {// 1> 显示提示框myAlert.classList.add('show')// 2> 实现细节myAlert.innerText = msgconst bgStyle = isSuccess ? 'alert-success' : 'alert-danger'myAlert.classList.add(bgStyle)// 3> 过2秒隐藏setTimeout(() => {myAlert.classList.remove('show')// 提示：避免类名冲突，重置背景色myAlert.classList.remove(bgStyle)}, 2000)}// 1.1 登录-点击事件document.querySelector('.btn-login').addEventListener('click', () => {// 1.2 获取用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// console.log(username, password)// 1.3 判断长度if (username.length < 8) {alertFn('用户名必须大于等于8位', false)console.log('用户名必须大于等于8位')return // 阻止代码继续执行}if (password.length < 6) {alertFn('密码必须大于等于6位', false)console.log('密码必须大于等于6位')return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log('提交数据到服务器')axios({url: 'http://hmajax.itheima.net/api/login',method: 'POST',data: {username,password}}).then(result => {alertFn(result.data.message, true)console.log(result)console.log(result.data.message)}).catch(error => {alertFn(error.response.data.message, false)console.log(error)console.log(error.response.data.message)})})</script>
</body></html>相关文章：
AJAX——接口文档
1 接口文档 接口文档：描述接口的文章 接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数 传送门：AJAX阶段接口文档 <!DOCTYPE html> <html lang"en"><head><meta c…...
leetcode hot100不同路径
本题可以采用动态规划来解决。还是按照五部曲来做 确定dp数组：dp[i][j]表示走到（i，j）有多少种路径 确定递推公式：我们这里，只有两个移动方向，比如说我移动到（i，j&#x…...
【前端工程化面试题目】webpack 的热更新原理
可以在顺便学习一下 vite 的热更新原理，请参考这篇文章。 首先有几个知识点需要明确 热更新是针对开发过程中的开发服务器的，也就是 webpack-dev-serverwebpack 的热更新不需要额外的插件，但是需要在配置文件中 devServer属性中配置&#x…...
不花一分钱，在 Mac 上跑 Windows（M1/M2 版）
这是在 MacOS M1 上体验最新 Windows11 的效果： VMware Fusion，可以运行 Windows、Linux 系统，个人使用 licence 免费 安装流程见 👉 https://zhuanlan.zhihu.com/p/452412091 从申请 Fusion licence 到下载镜像，再到…...
Attempt to call an undefined function glutInit
Attempt to call an undefined function glutInit 解决方法： 从这里下载PyOpenGL 的whl安装文件， https://drive.google.com/drive/folders/1mz7faVsrp0e6IKCQh8MyZh-BcCqEGPwx 安装命令举栗 pip install PyOpenGL-3.1.7-cp39-cp39-win_amd64.whl pi…...
AB测试最小样本量
1.AB实验过程 常见的AB实验过程，分流-->实验-->数据分析-->决策：分流：用户被随机均匀的分为不同的组实验：同一组内的用户在实验期间使用相同的策略，不同组的用户使用相同或不同的策略。数据收集：…...
在Spring中事务失效的场景
在Spring框架中，事务管理是通过AOP（面向切面编程）实现的，主要依赖于Transactional注解。然而，在某些情况下，事务可能会失效。以下是一些可能导致Spring事务失效的常见场景： 非public方法&#…...
Rust 学习笔记 - 变量声明与使用
前言 任何一门编程语言几乎都脱离不了：变量、基本类型、函数、注释、循环、条件判断，这是一门编程语言的语法基础，只有当掌握这些基础语法及概念才能更好的学习 Rust。 变量介绍 Rust 是一种强类型语言，但在声明变量时…...
windows 下跑起大模型（llama）操作笔记
原贴地址：https://testerhome.com/topics/39091 前言 国内访问 chatgpt 太麻烦了，还是本地自己搭一个比较快，也方便后续修改微调啥的。 之前 llama 刚出来的时候在 mac 上试了下，也在 windows 上用 conda 折腾过，环…...
人工智能专题：基础设施行业智能化的基础设施，自智网络双价值分析
今天分享的是人工智能系列深度研究报告：《人工智能专题：基础设施行业智能化的基础设施，自智网络双价值分析》。 （报告出品方：埃森哲） 报告共计：32页 自智网络驱动的电信产业变革 经过多年的…...
docker 编译安装redis脚本
在Docker中编译安装Redis通常不是一个常见的做法，因为Redis官方提供了预编译的Docker镜像，这些镜像包含了已经编译好的Redis二进制文件。不过，如果你有特殊需求，想要自己从源代码编译Redis并打包成Docker镜像，你可以使…...
鸿蒙开发系列教程（二十三）--List 列表操作（2）
列表样式 1、设置内容间距 在列表项之间添加间距，可以使用space参数，主轴方向 List({ space: 10 }) { … } 2、添加分隔线 分隔线用来将界面元素隔开，使单个元素更加容易识别。 startMargin和endMargin属性分别用于设置分隔线距离列表侧…...
C#根据权重抽取随机数
（游戏中一个很常见的简单功能，比如抽卡抽奖抽道具，或者一个怪物有多种攻击动作，按不同的权重随机出个攻击动作等等……） 假如有三种物品 A、B、C，对应的权重分别是A（50），…...
SORA：OpenAI最新文本驱动视频生成大模型技术报告解读
Video generation models as world simulators：作为世界模拟器的视频生成模型 1、概览2、Turning visual data into patches：将视觉数据转换为补丁3、Video compression network：视频压缩网络4、Spacetime Latent Patches：时空潜在…...
阿里云第七代云服务器ECS计算c7、通用g7和内存r7配置如何选择？
阿里云服务器配置怎么选择合适？CPU内存、公网带宽和ECS实例规格怎么选择合适？阿里云服务器网aliyunfuwuqi.com建议根据实际使用场景选择，例如企业网站后台、自建数据库、企业OA、ERP等办公系统、线下IDC直接映射、高性能计算和大游戏并发&…...
视觉slam十四讲学习笔记（六）视觉里程计 1
本文关注基于特征点方式的视觉里程计算法。将介绍什么是特征点，如何提取和匹配特征点，以及如何根据配对的特征点估计相机运动。 目录 前言 一、特征点法 1 特征点 2 ORB 特征 FAST 关键点 BRIEF 描述子 3 特征匹配 二、实践：特征提取…...
PyTorch-线性回归
已经进入大模微调的时代，但是学习pytorch，对后续学习rasa框架有一定帮助吧。 <!-- 给出一系列的点作为线性回归的数据，使用numpy来存储这些点。 --> x_train np.array([[3.3], [4.4], [5.5], [6.71], [6.93], [4.168],[9.779], [6.1…...
C++数据结构与算法——栈与队列
C第二阶段——数据结构和算法，之前学过一点点数据结构，当时是基于Python来学习的，现在基于C查漏补缺，尤其是树的部分。这一部分计划一个月，主要利用代码随想录来学习，刷题使用力扣网站，不定时更…...
掌上新闻随心播控，HarmonyOS SDK助力新浪新闻打造精致易用的资讯服务新体验
原生智能是HarmonyOS NEXT的核心亮点之一，依托HarmonyOS SDK丰富全面的开放能力，开发者只需通过几行代码，即可快速实现AI功能。新浪新闻作为鸿蒙原生应用开发的先行者之一，从有声资讯入手，将基于Speech Kit朗读控件上线…...
2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题
题库来源：安全生产模拟考试一点通公众号小程序 2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题是由安全生产模拟考试一点通提供，危险化学品经营单位主要负责人证模拟考试题库是根据危险化学品经营单位主…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径，但是vite中默认不可以。 如何实现： vite中提供了resolve.alias：通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...