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年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题是由安全生产模拟考试一点通提供，危险化学品经营单位主要负责人证模拟考试题库是根据危险化学品经营单位主…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率（或其他自定义指标）来调整这些对象的规模，从而帮助应用程序在负…...
C++_哈希表
本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说，直接开始吧！ 一、基础概念 1. 哈希核心思想： 哈希函数的作用：通过此函数建立一个Key与存储位置之间的映射关系。理想目标：实现…...
基于单片机的宠物屋智能系统设计与实现（论文+源码）
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢，连接红外测温传感器，可实时精准捕捉宠物体温变化，以便及时发现健康异常；水位检测传感器时刻监测饮用水余量，防止宠物…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网（IIoT）场景中，结合 DDS（Data Distribution Service） 和 Rx（Reactive Extensions） 技术，实现 …...
CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)
漏洞概述 漏洞名称：Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号：CVE-2023-25194 CVSS评分：8.8 影响版本：Apache Kafka 2.3.0 - 3.3.2 修复版本：≥ 3.4.0 漏洞类型：反序列化导致的远程代…...