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

AJAX 02 案例、Bootstrap框架

news 2026/4/14 17:50:48

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

deepin25.10安装claude

deepin25.10安装claude 软件备注nodejscladue运行环境git版本控制国产大模型api-key商业策略cc switch管理大模型claduevscode如果不习惯命令行操作可以选择一个图画工具 准备 创建软件安装目录 mkdir ~/optnodejs 下载nodejs wget https://nodejs.org/dist/v24.14.1/node-v…...

编程新知 2026/4/14 16:22:34

解锁AI编程新境界：Cursor-Free-VIP全面指南

解锁AI编程新境界&#xff1a;Cursor-Free-VIP全面指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial request…...

编程新知 2026/4/14 15:27:27

Qwen3-ASR-1.7B效果展示：嘈杂地铁站环境下的普通话指令识别实录

Qwen3-ASR-1.7B效果展示&#xff1a;嘈杂地铁站环境下的普通话指令识别实录 1. 真实场景下的语音识别挑战 在地铁站这样的嘈杂环境中进行语音识别&#xff0c;一直是语音技术面临的最大挑战之一。背景噪音、人声干扰、广播声、列车进站声等各种声音混杂在一起&#xff0c;让传…...

编程新知 2026/4/14 15:09:04

iFakeLocation技术深度解析：跨平台iOS虚拟定位实战指南

iFakeLocation技术深度解析&#xff1a;跨平台iOS虚拟定位实战指南 【免费下载链接】iFakeLocation Simulate locations on iOS devices on Windows, Mac and Ubuntu. 项目地址: https://gitcode.com/gh_mirrors/if/iFakeLocation 在移动应用开发和测试领域&#xff0c;…...

编程新知 2026/4/14 14:44:26

英雄联盟回放分析工具ROFL-Player：免费快速查看比赛数据的终极指南

英雄联盟回放分析工具ROFL-Player&#xff1a;免费快速查看比赛数据的终极指南 【免费下载链接】ROFL-Player (No longer supported) One stop shop utility for viewing League of Legends replays! 项目地址: https://gitcode.com/gh_mirrors/ro/ROFL-Player ROFL-Pla…...

编程新知 2026/4/14 14:41:59

从死守 Windows 到彻底 Mac 化：程序员一旦用了 Mac，真的很难再回去

从死守 Windows 到彻底 Mac 化&#xff1a;程序员一旦用了 Mac&#xff0c;真的很难再回去“以前一直用 Windows&#xff0c;不敢用 Mac&#xff0c;怕自己不习惯&#xff1b;但一旦用了 Mac&#xff0c;再也回不去 Windows。”这句话在程序员圈里&#xff0c;几乎已经成了一句…...

编程新知 2026/4/14 14:21:29

如何快速构建私有化大语言模型：ggml与llama.cpp的终极集成指南

如何快速构建私有化大语言模型&#xff1a;ggml与llama.cpp的终极集成指南 【免费下载链接】ggml Tensor library for machine learning 项目地址: https://gitcode.com/GitHub_Trending/gg/ggml 在当今AI驱动的时代&#xff0c;构建私有化大语言模型已成为企业和开发者…...

编程新知 2026/4/14 13:11:34

3分钟掌握Windows风扇智能控制：FanControl终极指南解决电脑噪音与散热难题

3分钟掌握Windows风扇智能控制&#xff1a;FanControl终极指南解决电脑噪音与散热难题 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com…...

编程新知 2026/4/14 12:22:29

【研报307】矿山机械行业研究：国内企业电动无人化与出海迎爆发期

本报告提供限时下载&#xff0c;请查看文后提示以下仅为报告部分内容&#xff1a;摘要&#xff1a;全球矿山机械市场规模超1330亿美元&#xff0c;铜、金价格高位推动矿企资本开支加速上行&#xff0c;行业景气拐点明确。国内企业迎来三重成长共振&#xff1a;出海随中国矿企全…...

编程新知 2026/4/14 12:07:45

不止于抓包：解锁Charles与Burp Suite联动的高级玩法，打造你的移动安全测试工作流

移动安全测试进阶&#xff1a;Charles与Burp Suite高效联动实战指南 当你已经能够熟练使用Charles或Burp Suite单独进行抓包分析时&#xff0c;是否想过将两者的优势结合起来&#xff0c;打造一个更强大的移动安全测试工作流&#xff1f;本文将带你超越基础抓包操作&#xff0c…...

编程新知 2026/4/14 11:43:03