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年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题是由安全生产模拟考试一点通提供，危险化学品经营单位主要负责人证模拟考试题库是根据危险化学品经营单位主…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...
Unity中的transform.up
2025年6月8日，周日下午 在Unity中，transform.up是Transform组件的一个属性，表示游戏对象在世界空间中的“上”方向（Y轴正方向），且会随对象旋转动态变化。以下是关键点解析： 基本定义 transfor…...