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

AJAX 02 案例、Bootstrap框架

news 2025/9/14 3:24:05

AJAX 学习

  • AJAX 2 综合案例
    • 黑马 API
    • 01 图书管理
      • Bootstrap 官网
      • Bootstrap 弹框
      • 图书管理-渲染列表
      • 图书管理-添加图书
      • 图书管理-删除图书
      • 图书管理 - 编辑图书
    • 02 图片上传
    • 03 更换图片
    • 04 个人信息设置
      • 信息渲染
      • 头像修改
        • 补充知识点：label扩大表单的范围

AJAX 2 综合案例

黑马 API

传送门 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8

01 图书管理

在这里插入图片描述

Bootstrap 官网

中文网：https://www.bootcss.com/
Bootstrap引入：https://getbootstrap.com/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Bootstrap 弹框

功能： 不离开当前页面，显示单独内容，供用户操作

  1. 通过属性控制，弹框显示或隐藏 => 使用场景：单纯显示/隐藏
  2. 通过 JS 控制，弹框显示或隐藏 => 额外逻辑代码

步骤：

  1. 引入 bootstrap.css 和 bootstrap.js
  2. 准备弹框标签，确认结构
  3. 通过自定义属性，控制弹框的显示和隐藏

Bootstrap引入有两种方法，① 是本地方式引入Bootstrap（在官网下载之后 在HTML文件中引入）

② 通过CDN引用Bootstrap。

黑马程序员这个视频是使用 jsdelivr 这个CDN进行引入。JSDelivr是一款开源的免费公共CDN。它是目前第二受欢迎的公共CDN。2020年10月14日，JSDelivr成为Bootstrap的官方CDN。

https://getbootstrap.com/

在这里插入图片描述

在这里插入图片描述

图书管理-渲染列表

自己的图书数据：给自己起个外号，并告诉服务器（每个人的图书数据都不一样），默认会有三本书，基于这三本书做数据的增删改查
在这里插入图片描述

图书管理-添加图书

点击添加按钮=>弹框=>添加/取消=>渲染页面

图书管理-删除图书

绑定点击事件（获取图书ID）=>调用删除接口=>刷新-图书列表

图书管理 - 编辑图书

编辑图书-弹框（显示&隐藏）=>表单（数据回显）=>保存修改&刷新列表

要从服务器中获取，不能直接从表单里拿

02 图片上传

1、获取图片文件对象

2、使用 FormData 携带图片文件

const fd = new FormData()
fd.append(参数名，值)
这里的参数名与接口文档中定义的 img 保持一致
参数名字一定要写单引号fd.append('avatar', e.target.files[0])fd.append('creator', creator)

在这里插入图片描述

3、提交表单数据到服务器，使用图片 url 网址

<body><!-- 文件选择元素 --><input type="file" class="upload"><img src="" alt="" class="myImg"><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 => {// 获取图片文件console.log(e.target);console.log(e.target.files);console.log(e.target.files[0]);// 使用 FormData 携带图片文件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 => {console.log(result);const imgURL = result.data.data.urldocument.querySelector('.myImg').src = imgURL})})</script>
</body>

03 更换图片

表单关联，label和input的值关联，这样点击label 就能触发表单

在这里插入图片描述

04 个人信息设置

步骤：

  1. 信息渲染
  2. 头像修改
  3. 信息修改 提交表单
  4. 结果提示

怎么分析步骤？网址一打开，首先肯定要渲染页面，然后再分析修改功能

信息渲染

自己的用户信息：给自己起个外号，并告诉服务器，获取对应的用户信息

获取数据=>渲染信息

头像修改

获取到用户选择的头像文件=>提交到服务器=>返回服务器上 图片的URL网址=> 渲染

补充知识点：label扩大表单的范围

label 扩大表单的范围，用 label 中for属性的值，关联了 input 表单里面 ID的值，所以点在 label 上就等于点在了文件选择表单上

在这里插入图片描述

相关文章：

AJAX 02 案例、Bootstrap框架

AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点&#xff1a;label扩大表单的范围 AJAX 2 综合案例 黑…...

编程日记 2024/3/22 2:11:17

SinoDB客户端工具dbaccess

类似Oracle的客户端工具sqlplus&#xff0c;Mysql的客户端工具mysql&#xff0c;SinoDB数据库也有自带的命令行客户端工具dbaccess。 dbaccess 识别用户输入&#xff0c;将用户输入的 SQL 语句打包发送给 SinoDB 数据库服务器执行&#xff0c;然后接收服务器的执行结果&#xf…...

编程日记 2024/3/22 2:09:16

postman学习

一、如何学习postman工具 1、下载和安装 Postman&#xff1a; 首先&#xff0c;从 Postman 官方网站&#xff08;https://www.postman.com&#xff09;下载并安装 Postman 应用程序。 2、了解基本概念&#xff1a; 在开始学习之前&#xff0c;了解一些基本概念&#xff0c;…...

编程日记 2024/3/22 2:07:14

【Linux】初识进程

目录 操作系统是什么 设计操作系统的目的 操作系统的定位 如何理解管理 管理的本质 管理的例子 计算机的管理概念图 操作系统管理逻辑的六字真言 系统调用和库函数的概念 进程 进程的概念 什么是PCB&#xff1f; PCB的主要内容 如何查看进程&#xff1f; 通过系统…...

编程日记 2024/3/22 2:04:11

有关Theano和PyTensor库

根据Github里面的介绍&#xff0c;PyTensor是源于Theano&#xff0c; Theano目前应该已经不再开发了&#xff0c;更新都是很多年前。 因此PyTensor在背景介绍中说 PyTensor is a fork of Aesara, which is a fork of Theano. Theano和PyTensor都是计算相关的库&#xff0c;可以…...

编程日记 2024/3/22 2:02:08

用 Open-Sora 高效创作视频，让创意触手可及

近年来&#xff0c;视频内容以爆炸式增长席卷了我们的生活。从短视频平台到直播带货&#xff0c;视频正成为人们获取信息和娱乐的主要方式。然而&#xff0c;传统视频制作流程往往耗时费力&#xff0c;对于普通用户来说门槛较高。 为了降低视频创作门槛&#xff0c;让更多人享…...

编程日记 2024/3/22 2:00:06

Git版本管理工具

前言&#xff1a; 本文记录学习使用 Git 版本管理工具的学习笔记&#xff0c;通过阅读参考链接中的博文和实际操作&#xff0c;快速的上手使用 Git 工具。 本文参考了引用链接博文里的内容。 引用: Git使用教程-配置管理 git reset详解-CSDN博客 3、Git使用不完全指南&am…...

编程日记 2024/3/22 1:51:58

微信小程序选择器picker的使用（省市区）

index.wxml picker中的 moderegion模式&#xff0c;这里同element中的select不同的是&#xff0c;不需要自己在绑定数据原&#xff0c;默认就包含了省市区的整体数据 <view class"section"><view class"section__title">省市区选择器</vie…...

编程日记 2024/3/22 1:49:56

std::shared_ptr与std::make_unique在类函数中的使用

在最近学习cartographer算法的时候&#xff0c;发现源码中大量的使用了std::shared_ptr与std::make_unique&#xff0c;对于这些东西之前不是很了解&#xff0c;为了更好的理解源代码&#xff0c;因此简单学习了一下这块内容的使用&#xff0c;在这里简单记个笔记。 std::shar…...

编程日记 2024/3/22 1:45:52

flutter 局部view更新，dialog更新进度，dialog更新

局部更新有好几种方法&#xff0c;本次使用的是 StatefulBuilder 定义 customState去更新对话框内容 import package:flutter/cupertino.dart; import package:flutter/material.dart;class ProgressDialog {final BuildContext context;BuildContext? dialogContext;double _…...

编程日记 2024/3/22 1:43:50

Lombok：@Delegate优化代码利器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、Delegate介绍 二、示例 三、使用场景 四、使用注意事项 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、Delegate介绍 Dele…...

编程日记 2024/3/22 1:42:48

【C语言】对称密码——栅栏的加密和解密

栅栏密码的原理&#xff1a; 栅栏层数n ①把将要传递的信息中的字母交替排成上下n行。 ②再将下面每一行字母排依次在上面一行的后边&#xff0c;从而形成一段密码。 ③例如&#xff1a;栅栏层数为2 明文&#xff1a;THE LONGEST DAY MUST HAVE AN END 加密&#xff1a; …...

编程日记 2024/3/22 1:40:46

一、rv1126开发之视频输入和视频编码

RV1126 H264/HEVC编码流程 一、RV1126编码的流程图&#xff1a; 二、每个代码模块详细讲解 2.1. VI模块的创建 VI模块的初始化&#xff1a;关键在于VI_CHN_ATTR_S结构体&#xff0c;这个结构体是VI设置的结构体。这个结构体的成员变量包括&#xff1a;pcVideoNode&#xff0…...

编程日记 2024/3/22 1:39:45

4.1 用源文件写汇编代码

汇编语言 1. 源程序 1.1 伪指令 汇编指令是有对应的机器码的指令&#xff0c;可以被编译为机器指令&#xff0c;最终为CPU所执行伪指令没有对应的机器指令&#xff0c;最终不被CPU所执行伪指令是由编译器来执行的指令&#xff0c;编译器根据伪指令来进行相关的编译工作 1.2…...

编程日记 2024/3/22 1:35:42

Linux TCP参数——tcp_abort_on_overflow

文章目录 tcp_abort_on_overflow全连接队列是什么&#xff1f;如何改变队列大小&#xff1f;内核源码流程命令查看总结 tcp_abort_on_overflow 英文翻译理解&#xff1a;溢出中止 所以&#xff0c;溢出指的是什么溢出&#xff1f; Linux中会维护socket全连接队列&#xff0c;所…...

编程日记 2024/3/22 1:34:41

jupyter notebook设置代码提示方法

在命令行运行以下代码&#xff1a; pip install jupyter_contrib_nbextensionsjupyter contrib nbextension install --userpip install jupyter_nbextensions_configuratorjupyter nbextensions_configurator enable --user &#xff08;有时安装第一行后会自动执行第二行&a…...

编程日记 2024/3/22 1:33:40

Linux 一点查询资料

Linux 一点查询资料 Linux101 Linux入门教程 鸟哥的Linux私房菜 Harley Hahn’s Guide to Unix and Linux 文件管理 - cd, pwd, mkdir, rmdir, ls, cp, rm, mv, tar 文件检索 - cat, more, less, head, tail, file, find 输入输出控制 - 重定向, 管道, tee, xargs 文本处理 -…...

编程日记 2024/3/22 1:31:38

如何快速搭建一个完整的vue2+element-ui的项目-二

技术细节-继续配置 提示&#xff1a;你以为这样就完了吗,其实还有很多东西需要我们自己手写的 例如&#xff1a; element-ui的配置样式重置配置src使用的配置elinst配置axios异步请求的二次封转配置语言国际化配置(这个看需求,我这里就不用配置了)vuex的配置mixins的配置开发环…...

编程日记 2024/3/22 1:30:37

多语言LLM的状态：超越英语

多语言大语言模型的发展现状&#xff1a;超越英语 引言 据微软研究院的数据显示&#xff0c;世界上大约88%的语言&#xff0c;即12亿人的母语&#xff0c;缺乏对大型语言模型&#xff08;LLM&#xff09;的访问。这是因为大多数LLM都是以英语为中心的&#xff0c;即它们大多是…...

编程日记 2024/3/22 1:29:36

kafka什么情况下会认为发送失败进而去重试

在Kafka中&#xff0c;发送消息的过程是异步的&#xff0c;即消息后不会立即得到发送结果。Kafka会将消息添加到发送缓冲区&#xff0c;并立即返回一个成功的响应。因此&#xff0c;Kafka并不会直接知道消息是否成功发送到了目标主题的分区。 Kafka在以下情况下会认为发送失败…...

编程日记 2024/3/22 1:26:33

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/8/25 23:31:20

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/9/6 20:28:13

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/9/12 23:27:32

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/9/12 21:09:32

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/9/14 0:25:25

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/9/2 18:20:53

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05