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

Ajax 笔记（二）—— Ajax 案例

news 2025/6/19 1:42: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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2025/6/16 9:14:26

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/6/15 19:06:27

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释当然可以！这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2025/6/17 21:15:00

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...

编程新知 2025/6/16 15:57:51

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。一、智能合约修改为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/6/16 18:42:13

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置五、字节码修改实现代码&#…...

编程新知 2025/6/15 11:13:44

深度学习水论文：mamba＋图像增强

🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...

编程新知 2025/6/15 11:54:03

数据库——redis

一、Redis 介绍 1. 概述 Redis（Remote Dictionary Server）是一个开源的、高性能的内存键值数据库系统，具有以下核心特点： 内存存储架构：数据主要存储在内存中，提供微秒级的读写响应多数据结构支持&…...

编程新知 2025/6/16 12:01:49

【iOS】 Block再学习

iOS Block再学习文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

编程新知 2025/6/16 16:00:12

笔记目录

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

相关文章：