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

Ajax 笔记（二）—— Ajax 案例

news 2026/4/26 12:21:26

笔记目录

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

别再让最优解‘跑路’了：Python实战遗传算法精英保留策略（附geatpy库避坑指南）

Python遗传算法实战：精英保留策略的工程化实现与geatpy深度调优遗传算法在解决复杂优化问题时展现出独特优势，但许多工程师在实际应用中常遇到一个棘手现象——迭代过程中好不容易找到的优秀解会莫名"消失"。这种现象不仅拖慢收敛速度&#x…...

编程新知 2026/4/26 10:00:57

如何通过3个核心步骤彻底解决动漫游戏配置难题？YuukiPS启动器深度解析

如何通过3个核心步骤彻底解决动漫游戏配置难题？YuukiPS启动器深度解析【免费下载链接】Launcher-PC 项目地址: https://gitcode.com/gh_mirrors/la/Launcher-PC 你是否曾经为了启动一款动漫游戏而花费数小时配置环境？是否因为繁琐的补丁更新、账…...

编程新知 2026/4/26 9:09:46

如何用Zotero SciPDF插件一键获取科研文献PDF：终极免费解决方案

如何用Zotero SciPDF插件一键获取科研文献PDF：终极免费解决方案【免费下载链接】zotero-scipdf Download PDF from Sci-Hub automatically For Zotero7 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-scipdf 还在为下载学术论文PDF而头疼吗&#xff…...

编程新知 2026/4/26 8:11:00

树莓派RP2040多功能开发工具EncroPi深度解析

1. EncroPi项目概述SB Components推出的EncroPi是一款基于树莓派RP2040微控制器的多功能USB设备。这个看起来像普通U盘的小装置，实际上是一个集数据记录、加密存储、实时时钟显示和安全密钥功能于一体的开发工具。作为一名长期跟踪嵌入式设备的开发者，我…...

编程新知 2026/4/26 7:14:47

机器学习效果提升的黄金三角：数据、特征与模型优化

1. 机器学习效果提升的本质思考刚入行时总以为调参是提升模型效果的银弹，直到在Kaggle上连续三个月颗粒无收才意识到：参数优化不过是机器学习工作流中的最后一环。真正决定模型上限的，往往藏在数据管道和特征工程的细节里。就像米其林大厨不会…...

编程新知 2026/4/26 7:02:13

Flutter UI组件高级技巧

Flutter UI组件高级技巧什么是Flutter UI组件？ Flutter UI组件是构建Flutter应用程序用户界面的基本构建块，包括各种内置组件如按钮、文本、图像、列表等，以及自定义组件。 Flutter UI组件的核心概念 1. 无状态组件与有状态组件无状态组件&…...

编程新知 2026/4/26 6:51:54

Banana Pi BPI-W3开发板：RK3588 SoC与模块化设计解析

1. Banana Pi BPI-W3开发板深度解析作为一款基于Rockchip RK3588 SoC的高性能单板计算机，Banana Pi BPI-W3在硬件配置和接口丰富度上都达到了业界领先水平。这款开发板最引人注目的特点是采用了模块化设计——核心处理器部分采用独立的BPI-RK3588核心板，…...

编程新知 2026/4/26 5:56:33

从零开始打造AI画图大师：条件扩散模型完整实现与无分类器指引详解

你有没有想过，AI是如何听懂你的指令，画出你想要的东西的？当你对Midjourney输入“一只穿着宇航服的柴犬”，它真的能生成那张图——这背后究竟发生了什么？今天，我将带你亲手实现一个基础的文本控制AI绘图系统…...

编程新知 2026/4/26 5:52:29

如何在Windows上为苹果触控板实现原生级精准触控体验？

如何在Windows上为苹果触控板实现原生级精准触控体验？ 【免费下载链接】mac-precision-touchpad Windows Precision Touchpad Driver Implementation for Apple MacBook / Magic Trackpad 项目地址: https://gitcode.com/gh_mirrors/ma/mac-precision-touchpad …...

编程新知 2026/4/26 5:32:00

Agent 的“自我检查清单”：输出前自动审校的工程套路

Agent 工程化核心实践：输出前自动审校的「自我检查清单」实现套路，准确率提升92%的可复用方案副标题：从理论到落地，覆盖规则校验、事实核查、逻辑校验、格式合规四大维度的生产级审校系统实现第一部分：引言与基础 1.1 摘要/引言如果你做过AI Agent的生产落地，一定遇…...

编程新知 2026/4/26 4:57:59

笔记目录

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 提示框

相关文章：