AJAX 介绍
一、什么是AJAX ?
AJAX 是 异步的 JavaScript 和 XML（Asynchronous JavaScript And XML） 的缩写，是一种实现浏览器与服务器进行数据通信的技术。其核心是通过 XMLHttpRequest 对象在不重新刷新页面的前提下，与服务器交换数据并更新页面局部内容。
1.核心特性：
- 异步通信：无需刷新整个页面，即可发送请求、接收响应，实现页面动态更新（如加载省份列表、表单验证等）。
- 支持多种数据格式：可发送和接收 JSON、XML、HTML、文本等格式的数据，其中 JSON 是最常用的格式。
- 浏览器与服务器交互：作为中间层，实现前端与后端的数据交互，提升用户体验（如无刷新提交表单、动态加载数据）。
2.通俗理解：
相当于在浏览器和服务器之间建立一条 “秘密通道”，允许浏览器在不重新加载整个页面的情况下，单独向服务器请求数据（如省份列表、用户信息等），并将返回的数据局部更新到页面上，使页面 “动态化”。
3.学习路径：
- 先使用
axios库：基于XMLHttpRequest封装的简洁工具，简化 AJAX 操作（如发送请求、处理响应），广泛应用于 Vue、React 等框架中。 - 再了解底层原理：通过学习原生
XMLHttpRequest对象，理解 AJAX 的底层实现机制（如请求状态监听、错误处理等）。
4.核心作用：
实现浏览器与服务器之间的 动态数据交互，避免页面全量刷新，提升用户体验和开发效率。
5.怎么用AJAX ?
6.axios 使用
语法:
1.引入axios.js:https://unpkg.com/axios/dist/axios.min.js
这条链接打开的东西
2. 使用axios 函数
需求:请求目标资源地址,拿到省份列表数据,显示到页面
目标资源地址:http://hmajax.itheima.net/api/province
<!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>AJAX概念和axios使用</title>
</head><body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><p class="my-p"></p><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 好习惯：多打印，确认属性名console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表，插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})</script>
</body></html>
二、认识URL
1.定义:
2.URL 的组成
⑴.协议
http 协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
⑵.域名
域名:标记服务器在互联网中方位
⑶资源路径
资源路径:标记资源在服务器下的具体位置
3.获取- 新闻列表
需求:使用axios 从服务器拿到新闻列表数据
目标资源地址:http://hmajax.itheima.net/api/news
代码如下：
<!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>认识URL</title>
</head><body><!-- 新闻数据地址: http://hmajax.itheima.net/api/news--><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/news'}).then(result => {console.log(result)})</script>
</body></html>
三、URL 查询参数
定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
<!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><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><p></p><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/city',// 查询参数params: {pname: '辽宁省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>
</body></html>
1.案例：地区查询
<!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><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 目标: 根据省份和城市名字, 查询地区列表// 1. 查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let pname = document.querySelector('.province').valuelet cname = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>
四、常用请求方法和数据提交
1.常用请求方法
⑴.数据提交-注册账号
场景:当数据需要在服务器上保存
- 需求:通过axios 提交用户名和密码,完成注册功能
- 注册用户URL 地址:http://hmajax.itheima.net/api/register
- 请求方法:POST
- 参数名:
username 用户名(中英文和数字组成,最少8 位)
password 密码(最少6 位)
<!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://unpkg.com/axios/dist/axios.min.js"></script><script>/*注册用户：http://hmajax.itheima.net/api/register请求方法：POST参数名：username：用户名（中英文和数字组成，最少8位）password：密码 （最少6位）目标：点击按钮，通过axios提交用户和密码，完成注册*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'itheima789444444',password: '123456'}}).then(result => {console.log(result)})})</script>
</body></html>
如何用户名被占用，会报错
⑵.axios 错误处理
场景:再次注册相同的账号,会遇到报错信息
处理:用更直观的方式,给普通用户展示错误信息
<!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>axios错误处理</title>
</head><body><button class="btn">注册用户</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheima007',password: '7654321'}}).then(result => {// 成功console.log(result)}).catch(error => {// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>
五、HTTP协议-报文
HTTP 协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照HTTP 协议要求的格式,发送给服务器的内容
1.请求报文的格式
请求报文的组成部分有:
- 请求行：请求方法，URL，协议
- 请求头：以键值对的格式携带的附加信息，比如：Content-Type（内容类型）
- 空行：分隔请求头，空行之后的是发送给服务器的资源
- 请求体：发送的资源
用以下代码体验如何在游览器中查看请求报文
<!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>HTTP协议_请求报文</title>
</head><body><button class="btn">注册用户</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*注册用户：http://hmajax.itheima.net/api/register请求方法：POST参数名：username：用户名（中英文和数字组成, 最少8位）password：密码（最少6位）目标：运行后，查看请求报文*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheima00155667',password: '7654321'}}).then(result => {// 成功console.log(result)}).catch(error => {// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>
2.请求报文-错误排查
<!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://mirrors.tencent.com/stackpath.bootstrapcdn.com/bootstrap/5.2.2/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">JS中会动态插入提示文字</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username" name="username" aria-describedby="usernameHelp"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password" name="password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 1.获取 alertconst alertCom = document.querySelector('.alert')// 2.抽取提示框的方法function showAlert(msg, classname) {alertCom.innerText = msgalertCom.classList.add(classname)alertCom.classList.add('show')setTimeout(() => {// 延迟隐藏alertCom.classList.remove('show')alertCom.classList.remove(classname)}, 2000);}// 3.给登录按钮绑定点击事件，提交输入的用户信息到服务器document.querySelector('.btn-login').addEventListener('click', function () {// 3.1 获取输入的用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// 3.2用户名 密码 长度判断if (username.trim().length < 8) {showAlert('用户名长度需要大于等于8', 'alert-danger')return}if (password.trim().length < 6) {showAlert('密码长度需要大于等于6', 'alert-danger')return}// 3.3 通过axios提交到服务器 并 提示用户 成功 / 失败axios({url: 'http://hmajax.itheima.net/api/login',method: 'post',data: {username,password}}).then(res => {// 显示提示框showAlert(res.data.message, 'alert-success')}).catch(err => {// 显示警示框showAlert(err.response.data.message, 'alert-danger')})})</script>
</body></html>这个看看就行
3.HTTP 协议-响应报文
HTTP 协议：规定了浏览器发送及服务器返回内容的格式
响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容
- 响应行（状态行）：协议、HTTP 响应状态码、状态信息
- 响应头：以键值对的格式携带的附加信息，比如：Content-Type
- 空行：分隔响应头，空行之后的是服务器返回的资源
- 响应体：返回的资源
4.HTTP 响应状态码
<!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>HTTP协议_响应报文</title>
</head><body><button class="btn">注册用户</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/registrweer1ddd',method: 'post',data: {username: 'itheima007',password: '7654321'}}).then(result => {// 成功console.log(result)}).catch(error => {// 失败// 处理错误信息// console.log(error)console.log(error.response.data.message)// alert(error.response.data.message)})})</script>
</body></html>
六、接口文档
接口文档：描述接口的文章（后端工程师）
接口：使用 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><!-- 引入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://unpkg.com/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>
把提示消息升级一下
<!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://unpkg.com/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>
八、form-serialize 插件
语法:
<!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>form-serialize插件使用</title>
</head><body><form action="javascript:;" class="example-form"><input type="text" name="username"><br><input type="text" name="password"><br><input type="button" class="btn" value="提交"></form><!-- 目标：在点击提交时，使用form-serialize插件，快速收集表单元素值1. 把插件引入到自己网页中--><script src="./lib/form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click', () => {/*** 2. 使用serialize函数，快速收集表单元素的值* 参数1：要获取哪个表单的数据* 表单元素设置name属性，值会作为对象的属性名* 建议name属性的值，最好和接口文档参数名一致* 参数2：配置对象* hash 设置获取数据结构* - true：JS对象（推荐）一般请求体里提交给服务器* - false: 查询字符串* empty 设置是否获取空值* - true: 获取空值（推荐）数据结构和标签结构一致* - false：不获取空值*/const form = document.querySelector('.example-form')const data = serialize(form, { hash: true, empty: true })// const data = serialize(form, { hash: false, empty: true })// const data = serialize(form, { hash: true, empty: false })console.log(data)})</script>
</body></html>
1.案例-用户登录
<!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 class="login-form"><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username" name="username"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password" name="password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 3.1 引入插件 --><script src="./lib/form-serialize.js"></script><script>// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 目标2：使用提示框，反馈提示消息// 目标3：使用form-serialize插件，收集用户名和密码// 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', () => {// 3.2 使用serialize函数，收集登录表单里用户名和密码const form = document.querySelector('.login-form')const data = serialize(form, { hash: true, empty: true })console.log(data)// {username: 'itheima007', password: '7654321'}const { username, password } = data// 1.2 获取用户名和密码// const username = document.querySelector('.username').value// const password = document.querySelector('.password').valueconsole.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 介绍
一、什么是AJAX ? AJAX 是 异步的 JavaScript 和 XML（Asynchronous JavaScript And XML） 的缩写，是一种实现浏览器与服务器进行数据通信的技术。其核心是通过 XMLHttpRequest 对象在不重新刷新页面的前提下，与服务器交换数据并更…...
硬盘损坏数据恢复后对python程序的影响
最近硬盘突然间坏掉了，让数据商恢复了2个月今天终于拿到了恢复后的数据。 但是一测试问题就来了： PS E:\geosystem> python manage.py runserver 0.0.0.0:5000 Unhandled exception in thread started by <function check_errors.<locals>.…...
promis（resolve，reject）入门级别
JavaScript Promise 的定义 Promise 是一种用于处理异步操作的对象，表示一个可能已经完成或者尚未完成的操作的结果。它的核心作用在于简化复杂的回调嵌套问题（即所谓的“回调地狱”），使异步代码更加清晰易读。 Promise 的状态 …...
w~嵌入式C语言~合集6
我自己的原文哦~ https://blog.51cto.com/whaosoft/13870384 一、开源MCU简易数字示波器项目 这是一款采用STC8A8K MCU制造的简单示波器，只有零星组件，易于成型。这些功能可以涵盖简单的测量： 该作品主要的规格如下： 单片机…...
学习海康VisionMaster之路径提取
一：进一步学习了 今天学习下VisionMaster中的路径提取：可在绘制的路径上等间隔取点或查找边缘点 二：开始学习 1：什么是路径提取？ 相当于事先指定一段路径，然后在对应的路径上查找边缘，这个也是…...
第十二章-PHP文件上传
第十二章-PHP文件上传 一，文件上传原理 一、HTTP协议与文件上传 1. 请求体结构 当表单设置enctype"multipart/form-data"时，浏览器会将表单数据编码为多部分（multipart）格式。 Boundary分隔符：随机生成的…...
第35课 常用快捷操作——用“鼠标左键”拖动图元
概述 拖动某个图元，是设计过程中常需要用到的操作，我们可以在原理图中拖动某个元器件符号，也可以在PCB图中拖动某个焊盘。 和常用的软件类似，用按住鼠标左键的方式来完成拖动操作。 用鼠标左键拖动图元 在想要拖动的图元上&…...
qt.qpa.plugin: Could not find the Qt platform plugin “cocoa“ in “ “
开发的pyqt项目在Windows运行时没啥问题，移植到Mac中时，发现一直报错qt.qpa.plugin: Could not find the Qt platform plugin “cocoa” in " "，一开始认为是pyqt版本问题，换了版本依旧不行。后续按照网上pip install o…...
二、Web服务常用的I/O操作
一、单个或者批量上传文件 前端： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>文件…...
「Mac畅玩AIGC与多模态04」开发篇01 - 创建第一个 LLM 对话应用
一、概述 本篇介绍如何在 macOS 环境下，基于已部署完成的 Dify 平台和本地 LLM 模型（如 DeepSeek），创建并测试第一个基础对话应用，实现快速验证推理服务与平台交互功能。 二、应用创建流程 1. 通过首页创建应用 打…...
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
在电商行业竞争日益激烈的今天，淘宝商品数据如同蕴藏巨大价值的宝藏，无论是商家进行竞品分析、优化商品策略，还是数据分析师挖掘市场趋势，都离不开对这些数据的获取与分析。本文将深入探讨获取淘宝商品数据的多种途径，…...
马哥教育Linux云计算运维课程
课程大小：19.1G 课程下载：https://download.csdn.net/download/m0_66047725/90640128 更多资源下载：关注我 你是否找了很多资料看了很多视频聊了很多群友，却发现自己技术仍然原地踏步？本教程联合BAT一线导师倾囊相授…...
FPGA与边缘AI：计算革命的前沿力量
在数字化转型浪潮中，边缘计算和人工智能正引领着技术革命。而FPGA（现场可编程门阵列）作为一种独特的硬件架构，正逐渐成为边缘AI领域的关键推动力。本文将探讨FPGA与边缘AI的结合如何重塑我们的数字世界，以及这一技术融…...
Kafka 架构设计和组件介绍
什么是Apache Kafka？ Apache Kafka 是一个强大的开源分布式事件流平台。它最初由 LinkedIn 开发，最初是一个消息队列，后来发展成为处理各种场景数据流的工具。 Kafka 的分布式系统架构支持水平扩展，使消费者能够按照自己的节奏检…...
虚函数表的设计和多态的实现
虚函数表 1.包含虚函数的类会有对应的虚函数表，这个表在编译时就初始化好了 2.本质是一个函数指针数组，里面是虚函数的指针 3.该类实例化的对象共用一张虚函数表 4.子类的虚函数表会继承父类的虚函数，如果继承多个父类那就把父类的虚函数…...
【Node.js 】在Windows 下搭建适配 DPlayer 的轻量（简陋）级弹幕后端服务
一、引言 DPlayer官网：DPlayer 官方弹幕后端服务：DPlayer-node MoePlayer/DPlayer-node：使用 Docker for DPlayer Node.js 后端（https://github.com/DIYgod/DPlayer） 本来想直接使用官网提供的DPlayer-node直接搭建…...
OpenSSH配置连接远程服务器MS ODBC驱动与Navicat数据库管理
OpenSSH配置连接远程服务器MS ODBC驱动与Navicat数据库管理 目录 OpenSSH配置连接远程服务器MS ODBC驱动与Navicat数据库管理 一、MS ODBC驱动 1.1、安装到Windows后的表现形式 1.2、版本的互斥性 1.3、安装程序 1.4、配置后才可用 二、Navicat数据库管理工具 2.1、安…...
织梦dedecms调用会员详细字段信息
织梦如何调用会员详细信息： 在include/extend.func.php function GetMemberInfos($fields,$mid){ global $dsql; if($mid < 0){ $revalue "Error"; } else{ $row$dsql->GetOne("sele ct * fr…...
MySQL 8.0 忘记登录密码 mysqld --init-file重置
看到了很多跳过授权表的办法，这里通过mysqld --init-file办法。 适用情况： 服务器可以启动但无法登录/忘记登录密码。 一、首先停止 MySQL 服务： 按下 Win R 组合键，输入 services.msc 并点击“确定”，打开“服务”…...
Python 学习路线与笔记跳转（持续更新笔记链接）
这里写目录标题 Python 学习路线与笔记Python 简介学习路线第一阶段：Python 基础第二阶段：Python 进阶第三阶段：实用库与框架第四阶段：DevOps 与 Python第五阶段：最佳实践与高级技巧 学习资源官方资源在线学习平台书籍…...
操作系统：计算机世界的基石与演进
一、操作系统的本质与核心功能 操作系统如同计算机系统的"总管家"，在硬件与应用之间架起关键桥梁。从不同视角观察，其核心功能呈现多维价值： 硬件视角的双重使命： 硬件管理者：通过内存管理、进程调度和设…...
Codeium 免费的AI编程助手
Codeium 由 Exafunction 团队（主要也是美国华人）开发的一款免费AI编程助手，是一个建立在顶尖AI技术上的代码加速工具，其背后的老板非常厉害，据说投资过马斯克的SpaceX。Codeium 本身具有颇多的亮点，支持70种…...
在MySQL Shell里 重启MySQL 8.4实例
前一段时间看到MySQL官方视频的Oracle工程师在mysql shell里面重启mysql实例，感觉这个操作很方便，所以来试试，下面为该工程师的操作截图 1.MySQL Shell 通过root用户连上mysql，shutdown mysql实例 [rootmysql8_3 bin]# mysqlshMy…...
FANUC机器人GI与GO位置数据传输设置
FANUC机器人GI与GO位置数据传输设置（整数小数分开发） 一、概述 在 Fanuc 机器人应用中，如果 IO 点位足够，可以利用机器人 IO 传输位置数据及偏移位置数据等。 二、操作步骤 1、确认通讯软件安装 首先确认机器人控制柜已经安装…...
LeetCode 24 两两交换链表中的节点
给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换）。 示例 1： 输入：head [1,2,3,4] 输出：[2,1…...
低代码平台开发手机USB-HID调试助手
项目介绍 USB-HID调试助手是一种专门用于调试和测试USB-HID设备的软件工具。USB-HID设备是一类通过USB接口与计算机通信的设备，常见的HID设备包括键盘、鼠标、游戏控制器、以及一些专用的工业控制设备等。 主要功能包括： 数据监控：实时监控和…...
Java 深度与实战 · 每日一读 ：高频面试真题解析 · ReentrantLock / CAS / AQS 篇
ReentrantLock 深层分析：CAS、AQS原理全揭秘 此文为「Java 深度与实战每日一读」系列第1篇，原创专栏，全篇不含水分，该系列整个面向：初学、进阶、面试、原理、实战，全综合型导向。 目标：让任何级…...
 案例解析)
golang goroutine（协程）和 channel(管道) 案例解析
文章目录 goroutine和channel概念开启线程与channel简单通信流程多个工作协程并发执行流程 goroutine和channel概念 goroutine(协程)，一般我们常见的是进程，线程，进程可以理解为一个软件在运行执行的过程，线程跟协程比较类似&…...
亚组风险比分析与可视化
1. 结果解读 1.1 风险比概述 1.1.1 风险比基本概念 风险比（Hazard Ratio）用于衡量治疗组与对照组事件发生的风险差异。 风险比为1，表示两组风险相同；小于1，治疗组风险低；大于1，治疗组风险高。 1.1.2 性别亚组分析 A性风险比小于1，表明治疗对A性有积极效果，风险降低。…...
计算机网络核心知识点全解析（面试通关版）
一、网络体系结构：从OSI到TCP/IP的分层设计 1.1 七层模型与四层模型对比 OSI七层模型核心功能TCP/IP四层对应典型协议生活类比应用层为应用程序提供服务（如文件传输、邮件、Web浏览）应用层HTTP、FTP、SMTP、DNS快递面单信息（收件…...