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

Ajax 笔记（二）—— Ajax 案例

news 2025/11/26 21:23:05

笔记目录

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

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/11/23 6:02:35

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述上一节对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/11/25 5:06:44

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2025/11/21 18:39:27

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/11/17 13:04:55

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/11/24 23:36:07

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/11/18 8:57:16

ip子接口配置及删除

配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

C++.OpenGL （20/64）混合（Blending）

混合（Blending）透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

笔记目录

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

相关文章：