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

Ajax 笔记（二）—— Ajax 案例

news 2026/2/10 15:45:58

笔记目录

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

AtCoder 第409场初级竞赛 A~E题解

A Conflict 【题目链接】原题链接：A - Conflict 【考点】枚举【题目大意】找到是否有两人都想要的物品。【解析】遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。【难度】 GESP三级【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。腐蚀…...

编程新知 2026/2/8 22:00:17

论文笔记——相干体技术在裂缝预测中的应用研究

目录相关地震知识补充地震数据的认识地震几何属性相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/11/7 10:02:17

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。一、问题分析滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2026/2/6 5:55:05

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一：yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因，后面把yaml.safe_dump直接替换成yaml.dump，确实能保存，但出现乱码： 放弃yaml.dump，又切…...

编程新知 2026/2/4 11:44:10

笔记目录

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

相关文章：