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

Ajax 笔记（二）—— Ajax 案例

news 2025/10/9 14:11:21

笔记目录

2. Ajax 综合案例
- 2.1 案例一-图书管理
- - 2.1.1 渲染列表
  - 2.1.2 新增图书
  - 2.1.3 删除图书
  - 2.1.4 编辑图书
- 2.2 案例二-背景图的上传和更换
- - 2.2.1 上传
  - 2.2.2 更换
- 2.3 案例三-个人信息设置
- - 2.3.1 信息渲染
  - 2.3.2 头像修改
  - 2.2.3 信息修改
  - 2.3.4 提示框

Ajax 笔记：

Ajax 笔记（一）—— Ajax 入门

Ajax 笔记（二）—— Ajax 案例

Ajax 笔记（三）—— Ajax 原理

Ajax 笔记（四）—— Ajax 进阶

Ajax 笔记接口文档：https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135

2. Ajax 综合案例

2.1 案例一-图书管理

2.1.1 渲染列表

获取数据的时候，需要给自己起一个外号。由于都是上传到同一服务器，为了区分不同同学的数据。

/*** 目标1：渲染图书列表*  1.1 获取数据*  1.2 渲染数据*/
const creator = '老张'
// 封装-获取并渲染图书列表函数
function getBooksList() {// 1.1 获取数据axios({url: 'http://hmajax.itheima.net/api/books',params: {// 外号：获取对应数据creator}}).then(result => {// console.log(result)const bookList = result.data.data// console.log(bookList)// 1.2 渲染数据const htmlStr = bookList.map((item, index) => {return `<tr><td>${index + 1}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td data-id=${item.id}><span class="del">删除</span><span class="edit">编辑</span></td></tr>`}).join('')// console.log(htmlStr)document.querySelector('.list').innerHTML = htmlStr})
}
// 网页加载运行，获取并渲染列表一次
getBooksList()

在这里插入图片描述

2.1.2 新增图书

/*** 目标2：新增图书*  2.1 新增弹框->显示和隐藏*  2.2 收集表单数据，并提交到服务器保存*  2.3 刷新图书列表*/
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮->点击->隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {// 2.2 收集表单数据，并提交到服务器保存const addForm = document.querySelector('.add-form')const bookObj = serialize(addForm, { hash: true, empty: true })// console.log(bookObj)// 提交到服务器axios({url: 'http://hmajax.itheima.net/api/books',method: 'POST',data: {...bookObj,creator}}).then(result => {// console.log(result)// 2.3 添加成功后，重新请求并渲染图书列表getBooksList()// 重置表单addForm.reset()// 隐藏弹框addModal.hide()})
})

在这里插入图片描述

2.1.3 删除图书

/*** 目标3：删除图书*  3.1 删除元素绑定点击事件->获取图书id*  3.2 调用删除接口*  3.3 刷新图书列表*/
// 3.1 删除元素->点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {// 获取触发事件目标元素// console.log(e.target)// 判断点击的是删除元素if (e.target.classList.contains('del')) {// console.log('点击删除元素')// 获取图书id（自定义属性id）const theId = e.target.parentNode.dataset.id// console.log(theId)// 3.2 调用删除接口axios({url: `http://hmajax.itheima.net/api/books/${theId}`,method: 'DELETE'}).then(() => {// 3.3 刷新图书列表getBooksList()})}
})

2.1.4 编辑图书

/*** 目标4：编辑图书*  4.1 编辑弹框->显示和隐藏*  4.2 获取当前编辑图书数据->回显到编辑表单中*  4.3 提交保存修改，并刷新列表*/
// 4.1 编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 编辑和删除都是动态创建的元素，需要将事件委托给`.list`
// 编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {// 判断点击的是否为编辑元素if (e.target.classList.contains('edit')) {// 4.2 获取当前编辑图书数据->回显到编辑表单中const theId = e.target.parentNode.dataset.idaxios({url: `http://hmajax.itheima.net/api/books/${theId}`}).then(result => {const bookObj = result.data.data// document.querySelector('.edit-form .bookname').value = bookObj.bookname// document.querySelector('.edit-form .author').value = bookObj.author// 数据对象“属性”和标签“类名”一致// 遍历数据对象，使用属性去获取对应的标签，快速赋值const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']keys.forEach(key => {document.querySelector(`.edit-form .${key}`).value = bookObj[key]})})editModal.show()}
})
// 修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', () => {// 4.3 提交保存修改，并刷新列表const editForm = document.querySelector('.edit-form')const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true})// 保存正在编辑的图书id，隐藏起来：无需让用户修改// <input type="hidden" class="id" name="id" value="84783">axios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'PUT',data: {bookname,author,publisher,creator}}).then(() => {// 修改成功以后，重新获取并刷新列表getBooksList()// 隐藏弹框editModal.hide()})
})

在这里插入图片描述

2.2 案例二-背景图的上传和更换

2.2.1 上传

先选择的本地文件，接着提交到服务器保存，服务器会返回图片的 url 网址，然后把网址加载到 img 标签的 src 属性中即可显示。避免了浏览器保存是临时性的问题。

图片是文件，而不是以前的数字和字符串。所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递

<!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><!-- 文件选择元素 --><input type="file" class="upload"><img src="" alt="" class="my-img"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标：图片上传，显示到网页上*  1. 获取图片文件*  2. 使用 FormData 携带图片文件*  3. 提交到服务器，获取图片url网址使用*/// 文件选择元素->change改变事件document.querySelector('.upload').addEventListener('change', e => {// 1. 获取图片文件console.log(e.target.files[0])// 2. 使用 FormData 携带图片文件const fd = new FormData()fd.append('img', e.target.files[0])// 3. 提交到服务器，获取图片url网址使用axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(result => {console.log(result)// 取出图片url网址，用img标签加载显示const imgUrl = result.data.data.urldocument.querySelector('.my-img').src = imgUrl})})</script>
</body></html>

2.2.2 更换

/*** 目标：网站-更换背景*  1. 选择图片上传，设置body背景*  2. 上传成功时，"保存"图片url网址*  3. 网页运行后，"获取"url网址使用* */
document.querySelector('.bg-ipt').addEventListener('change', e => {// 1. 选择图片上传，设置body背景console.log(e.target.files[0])const fd = new FormData()fd.append('img', e.target.files[0])axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(result => {const imgUrl = result.data.data.urldocument.body.style.backgroundImage = `url(${imgUrl})`// 2. 上传成功时，"保存"图片url网址localStorage.setItem('bgImg', imgUrl)})
})// 3. 网页运行后，"获取"url网址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

2.3 案例三-个人信息设置

2.3.1 信息渲染

/*** 目标1：信息渲染*  1.1 获取用户的数据*  1.2 回显数据到标签上* */
const creator = '播仔'
// 1.1 获取用户的数据
axios({url: 'http://hmajax.itheima.net/api/settings',params: {creator}
}).then(result => {const userObj = result.data.data// 1.2 回显数据到标签上Object.keys(userObj).forEach(key => {if (key === 'avatar') {// 赋予默认头像document.querySelector('.prew').src = userObj[key]} else if (key === 'gender') {// 赋予默认性别// 获取性别单选框：[男radio元素，女radio元素]const gRadioList = document.querySelectorAll('.gender')// 获取性别数字：0男，1女const gNum = userObj[key]// 通过性别数字，作为下标，碰巧对应性别单选框元素的下标，设置选中状态gRadioList[gNum].checked = true} else {// 赋予默认内容document.querySelector(`.${key}`).value = userObj[key]}})
})

在这里插入图片描述

2.3.2 头像修改

/*** 目标2：修改头像*  2.1 获取头像文件*  2.2 提交服务器并更新头像* */
// 文件选择元素->change事件
document.querySelector('.upload').addEventListener('change', e => {// 2.1 获取头像文件console.log(e.target.files[0])const fd = new FormData()fd.append('avatar', e.target.files[0])fd.append('creator', creator)// 2.2 提交服务器并更新头像axios({url: 'http://hmajax.itheima.net/api/avatar',method: 'PUT',data: fd}).then(result => {const imgUrl = result.data.data.avatar// 把新的头像回显到页面上document.querySelector('.prew').src = imgUrl})
})

2.2.3 信息修改

/*** 目标3：提交表单*  3.1 收集表单信息*  3.2 提交到服务器保存*/
// 保存修改->点击
document.querySelector('.submit').addEventListener('click', () => {// 3.1 收集表单信息const userForm = document.querySelector('.user-form')const userObj = serialize(userForm, { hash: true, empty: true })userObj.creator = creator// 性别数字字符串，转成数字类型userObj.gender = +userObj.genderconsole.log(userObj)// 3.2 提交到服务器保存axios({url: 'http://hmajax.itheima.net/api/settings',method: 'PUT',data: userObj}).then(result => {})
})

在这里插入图片描述

2.3.4 提示框

前置知识：bootstrap 的 toast 提示框：

先准备对应的标签结构（模板里已有）
设置延迟自动消失的时间

<div class="toast" data-bs-delay="1500">提示框内容
</div>

使用 JS 的方式，在 axios 请求响应成功时，展示结果

 // 创建提示框对象const toastDom = document.querySelector('css选择器')const toast = new bootstrap.Toast(toastDom)// 显示提示框toast.show()

提示框代码

/*** 目标3：提交表单*  3.1 收集表单信息*  3.2 提交到服务器保存*/
/*** 目标4：结果提示*  4.1 创建toast对象*  4.2 调用show方法->显示提示框*/
// 保存修改->点击
document.querySelector('.submit').addEventListener('click', () => {// 3.1 收集表单信息const userForm = document.querySelector('.user-form')const userObj = serialize(userForm, { hash: true, empty: true })userObj.creator = creator// 性别数字字符串，转成数字类型userObj.gender = +userObj.genderconsole.log(userObj)// 3.2 提交到服务器保存axios({url: 'http://hmajax.itheima.net/api/settings',method: 'PUT',data: userObj}).then(result => {// 4.1 创建toast对象const toastDom = document.querySelector('.my-toast')const toast = new bootstrap.Toast(toastDom)// 4.2 调用show方法->显示提示框toast.show()})
})

在这里插入图片描述

Ajax 笔记（二）—— Ajax 案例

笔记目录 2. Ajax 综合案例2.1 案例一-图书管理2.1.1 渲染列表2.1.2 新增图书2.1.3 删除图书2.1.4 编辑图书 2.2 案例二-背景图的上传和更换2.2.1 上传2.2.2 更换 2.3 案例三-个人信息设置2.3.1 信息渲染2.3.2 头像修改2.2.3 信息修改2.3.4 提示框 Ajax 笔记： Ajax…...

编程日记 2023/8/12 7:42:45

微信小程序隐私协议模板

在设置中找到用户隐私保护进行更新，如下图： 具体协议补充可参考如下： 为了分辨用户，开发者将在获取你的明示同意后，收集你的微信昵称、头像为了显示距离，开发者将在获取你的明示同意后，收…...

编程日记 2023/8/12 7:41:44

Three.js WebXR沉浸式渲染简明教程

在前面文章中，我们了解了 VR 概念以及它们如何在 WebXR 中映射。这使你可以考虑想要为用户提供的体验。在本文中，我们将介绍如何将 WebXR 与 Three.JS 结合使用来创建针对大型异构用户群的沉浸式体验。警告：WebXR API 仍在完善中&#xf…...

编程日记 2023/8/12 7:40:43

flask使用cookie （设置cookie与查看cookie内容）

1.flask包cookie的使用设置cookie app.route(/set_cookie) def set_cookie():resp make_response(Setting cookie)resp.set_cookie(username, John)return resp查看cookie: app.route(/get_cookie) def get_cookie():username request.cookies.get(username)return Welco…...

编程日记 2023/8/12 7:39:42

信息学奥赛一本通——1281：最长上升子序列

文章目录题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码题目【题目描述】一个数的序列 b i b_i bi，当 b 1 < b 2 < . . . < b S b_1<b_2<...<b_S b1<b2<...<bS的时候，我们称这个序列是上升…...

编程日记 2023/8/12 7:38:40

vue3+antv x6自定义节点样式

先大致定下节点样式，需要展示标题，输入/输出连接桩， 参考样子大概是 https://x6.antv.antgroup.com/examples/showcase/practices#class 这是根据antv x6配置非自定义节点图表案例结果数据格式大概是 nodes:[{title:鸟,id:node1,ports…...

编程日记 2023/8/12 7:37:39

Arcgis中直接通过sde更新sqlserver空间数据库失败

问题背景不知道有没有人经历过这样一个情况，我们直接在Arcgis中通过sde更新serserver数据库会失败，就是虽然在sde更新sqlserver数据库，但是在Navicat中通过sql语句来查询，发现数据并没有更新，如：上图中，更新数据库后，第一张图是sde打开的sqlserver数据库，它的数据库…...

编程日记 2023/8/12 7:36:37

使用gewe框架进行微信群组管理（一）

友情链接：geweapi.com 点击访问即可。管理员操作小提示： 添加、删除、转让多个wxid时仅限于添加/删除管理员，1添加 2删除 3转让请求URL： http://域名地址/api/group/admin 请求方式： POST 请求头&#xff1a…...

编程日记 2023/8/12 7:35:36

【Linux】UDP协议——传输层

目录传输层再谈端口号端口号范围划分认识知名端口号两个问题 netstat与iostat pidof UDP协议 UDP协议格式 UDP协议的特点面向数据报 UDP的缓冲区 UDP使用注意事项基于UDP的应用层协议传输层在学习HTTP等应用层协议时，为了便于理解&#xff…...

编程日记 2023/8/12 7:34:34

【Linux进阶之路】进程（上）

文章目录前言一、操作系统加载过程二、进程1.基本概念2.基本信息①运行并观察进程②创建子进程③僵尸与孤儿进程（父子进程衍生出来的问题）1. 僵尸进程（Zombie状态）2. 孤儿进程 3.基本状态①操作系统的状态（统一&#…...

编程日记 2023/8/12 7:33:33

爬虫018_urllib库_cookie反爬_post请求百度翻译获取百分翻译内容_以及详细翻译内容---python工作笔记037

然后我们来看如何用urllib发送post请求,这里我们用百度翻译为例我们翻译一个spider,然后我们看请求,可以看到有很多找到sug这个可以看到这里的form data,就是post请求体中的内容然后我们点击preview其实就是返回的实际内容然后请求方式用的post 然后我们把上面的信息…...

编程日记 2023/8/12 7:32:31

【Nginx】Nginx网站服务

国外主流还是使用apache；国内现在主流是nginx（并发能力强，相对稳定） nginx：高新能、轻量级的web服务软件特点： 1.稳定性高（没apache稳）； 2.系统资源消耗比较低&#xf…...

编程日记 2023/8/12 7:31:30

go语言从0基础到安全项目开发实战

一.环境搭建并helloworld 搭建环境比较简单 1.1安装SDK 到以下链接下 Go下载 - Go语言中文网 - Golang中文社区下载windows版本64位zip包 https://studygolang.com/dl/golang/go1.20.7.windows-amd64.zip 1.2配置环境变量不配置的话就只能在bin目录下才能运行go命令 …...

编程日记 2023/8/12 7:30:29

Kubernetes Service 工作原理

本文介绍了 Kubernetes Service 的概念、原理和具体使用。作者：沈亚军爱可生研发团队成员，负责公司 DMP 产品的后端开发，爱好太广，三天三夜都说不完，低调低调… 本文来源：原创投稿爱可生开源社区出品&am…...

编程日记 2023/8/12 7:29:28

面部表情识别4：C++实现表情识别(含源码，可实时检测)

面部表情识别4：C实现表情识别(含源码，可实时检测) 目录面部表情识别4：C实现表情识别(含源码，可实时检测) 1.面部表情识别方法 2.人脸检测方法 3.面部表情识别模型(Python) （1） 面部表情识别模型的训练…...

编程日记 2023/8/12 7:28:27

提升Element UI分页查询用户体验与交互：实现修改未保存提示

我实现的功能是在 element ui 的分页组件中进行分页查询时，如果当前有未保存的修改数据就提示用户，用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据；选择不放弃，不重新查询，并且显示条数选择框保持原样&…...

编程日记 2023/8/12 7:27:25

UML-时序图

目录时序图时序图构成: 对象: 消息: 生命线(激活): 活动条: 时序图举例: 时序图时序图也叫顺序图、序列图. 时序图描述按照时间的先后顺序对象之间的动作过程，是由生命线和消息组成时序图构成: 对象: 对象是类的实例，对象是通过类来创建的&…...

编程日记 2023/8/12 7:26:24

Seata - 入门笔记

1、事务访问并可能更新数据库中数据库中各种数据线的一个程序执行单元原子性：事务是一个不可分割的工作单位，一个事务要么都做要么都不做一致性：必须是使数据库从一个一致性到另一个一致性的状态，中间状态不能被观察到隔离…...

编程日记 2023/8/12 7:25:21

springboot使用aop排除某些方法，更新从另外一张表，从另外一张表批量插入

AOP 在Spring Boot中使用AOP时，如果想要排除某些方法不被切面所影响，可以通过使用切面表达式中的!within关键字来实现。以下是一个示例： Aspect Component public class MyAspect {Before("execution(* com.example.service.*.*(..)) …...

编程日记 2023/8/12 7:24:20

Go 语言面试题（二）：实现原理

文章目录 Q1 init() 函数是什么时候执行的？Q2 Go 语言的局部变量分配在栈上还是堆上？Q3 2 个 interface 可以比较吗？Q4 两个 nil 可能不相等吗？Q5 简述 Go 语言GC(垃圾回收)的工作原理Q6 函数返回局部变量的指针是否安全&#xff…...

编程日记 2023/8/12 7:23:19

React Native 导航系统实战（React Navigation）

导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...

编程新知 2025/9/17 21:33:42

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/10/8 22:42:04

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/9/29 7:40:10

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/28 1:27:31

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...

编程新知 2025/10/5 8:40:33

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/8/16 14:02:21

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2025/10/5 4:58:01

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...

编程新知 2025/9/28 3:34:22

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述该模块…...

编程新知 2025/8/28 18:38:08

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/7/9 0:26:24

笔记目录

2. Ajax 综合案例

2.1 案例一-图书管理

2.1.1 渲染列表

2.1.2 新增图书

2.1.3 删除图书

2.1.4 编辑图书

2.2 案例二-背景图的上传和更换

2.2.1 上传

2.2.2 更换

2.3 案例三-个人信息设置

2.3.1 信息渲染

2.3.2 头像修改

2.2.3 信息修改

2.3.4 提示框

相关文章：