AJAX 02 案例、Bootstrap框架

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 上就等于点在了文件选择表单上

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/745463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FPGA】DDR3学习笔记(二)丨从SDRAM到DDR3的IP核设计

本篇文章包含的内容 一、DDR SDRAM1.1 基本概述1.2 工作时序&#xff08;以读取为例&#xff09; 二、DDR2 SDRAM2.1 基本概述2.2 工作时序 三、DDR3 SDRAM3.1 基本概述3.2 硬件设计3.3 读写时序3.4 MIG IP核设计3.5 读写代码设计 开发板&#xff1a;正点原子的达芬奇开发板&am…

【Leetcode每日一题】 递归 - 合并两个有序链表(难度⭐)(35)

1. 题目解析 题目链接&#xff1a;21. 合并两个有序链表 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 1. 递归函数定义与功能 递归函数的主要任务是将两个有序链表合并成一个新的有序链表&#xff0c;并返回合并后…

Git 学习笔记 三个区域、文件状态、分支、常用命令

Git 学习 GitGit概念VS Code中使用仓库&#xff08;repository&#xff09;示例 Git 使用时的三个区域示例 Git 文件状态示例 Git 暂存区示例 Git 回退版本删除文件忽略文件示例 分支分支的使用分支的合并与删除分支的合并冲突 Git常用命令Git远程仓库 (HTTP)步骤远程仓库 克隆…

【Linux】Linux命令速查表

Linux 命令列表 – 目录 文件和目录操作命令 文件权限命令文件压缩和归档命令进程管理命令系统信息命令 联网命令 IO重定向命令环境变量命令 用户管理命令 快捷键命令列表 Bash 快捷键命令 Nano 快捷键命令 VI 快捷键命令 Vim 快捷键命令Linux 命令备忘单常见问题解答 1. 文件和…

maven简介以及 Dependency Scope详解

前言 Maven 是一个开源的构建工具&#xff0c;用于管理 Java 项目的构建、依赖管理和项目信息管理。它提供了一种标准化的项目结构和构建流程&#xff0c;简化了项目的构建和部署过程。 maven特点以及功能 依赖管理&#xff1a;Maven 提供了强大的依赖管理功能。通过在项目的…

[linux]信号处理:信号编码、基本API、自定义函数和集合操作的详解

一、信号的概述 1、定义 信号是 Linux 进程间通信的最古老的方式。信号是软件中断&#xff0c;它是在软件层次 上对中断机制的一种模拟&#xff0c;是一种异步&#xff08;不等待&#xff09;通信的方式 。信号可以导致一个正在运行的进程被 另一个正在运行的异步进程中断&a…

分布式id生成方案

1. UUID&#xff08;通用唯一标识符&#xff09; 实现原理 工作方式&#xff1a;UUID是通过一系列算法生成的128位数字&#xff0c;通常基于时间戳、计算机硬件标识符、随机数等元素。全局唯一性&#xff1a;算法设计确保了即使在分布式系统中也能生成全局唯一的ID。 优缺点…

PyCharm创建一个简单的Django项目

1.Django简介 Django 是一个开放源代码的 Web 应用程序框架&#xff0c;由 Python 编写而成。它遵循 MVC&#xff08;模型-视图-控制器&#xff09;的软件设计模式&#xff0c;采用了 MTV&#xff08;模型-模板-视图&#xff09;的架构。Django 的设计目标是使开发复杂的、数据…

【MATLAB源码-第162期】基于matlab的MIMO系统的MMSE检测,软判决和硬判决误码率曲线对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 MIMO系统(Multiple-Input Multiple-Output&#xff0c;多输入多输出系统)是现代无线通信技术中的关键技术之一&#xff0c;它能够显著增加通信系统的容量和频谱效率&#xff0c;而不需要增加额外的带宽或发射功率。在MIMO系统…

Python学习DAY14_文档处理_Excel

文档处理 Excel电子表格 Python 的 openpyxl 模块让我们可以在 Python 程序中读取和修改 Excel 电子表格&#xff0c;由于微软从 Office 2007 开始使用了新的文件格式&#xff0c;这使得 Office Excel 和 LibreOffice Calc、OpenOffice Calc 是完全兼容的&#xff0c;这就意味…

WPF 两个程序之间传递参数(shell32.dll)

当前文章只是笔记&#xff0c;代码并不完善仅作参考。 完整案例&#xff1a;WPF 两个程序之间传递参数&#xff08;Process&#xff09;_wpf的exe程序传入参数-CSDN博客 主窗口 [DllImport("shell32.dll")]public static extern int ShellExecute(IntPtr hwnd, Str…

边缘计算全面概述

什么是边缘计算&#xff1f; 边缘计算是一种分布式计算概念&#xff0c;将智能集成到边缘设备&#xff08;边缘节点&#xff09;中&#xff0c;使数据能够在数据采集源附近实时处理和分析。由于边缘计算在网络边缘本地处理数据&#xff0c;而不是在云端或集中式数据中心&#…

云端巨擘:大数据与云计算的时代航向

文章目录 大数据时代大数据特点(4v1C大数据与云计算的关系 云计算云计算定义云计算特点云计算分类&#xff08;服务类型&#xff09;云计算实现机制云计算体系结构云计算的管理中间件层 大数据时代 大数据定义&#xff1a;海量数据或巨量数据&#xff0c;其规模巨大到无法通过…

学生时期学习资源同步-1 第一学期结业考试题9

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载

ArrayList 是如何进行扩容的?

典型回答 ArrayList 在添加元素时&#xff0c;会自动进行扩容操作&#xff0c;它的执行步骤如下&#xff1a; 当 ArrayList 的内部数组空间不足以容纳新增的元素时&#xff0c;会触发扩容机制。ArrayList 会创建一个新的更大的数组&#xff0c;通常是当前数组长度的 1.5倍 (可…

Spring中经典的7种设计模式源码分析

一、工厂模式 Spring使用工厂模式来创建Bean对象,如BeanFactory、ApplicationContext等。工厂模式为bean的创建过程提供了一个框架,同时隔离了实例化细节,使得代码更加解耦。 BeanFactory接口 BeanFactory接口仍然是Spring工厂模式的基础,它定义了获取Bean实例的基本方法。 …

LAMP网站部署(Discuz论坛网站部署)

目录 mysql命令 语法 选项 参数 实例 安装php 安装Mariadb 关掉防火墙和selinux 启动HTTP服务 初始化数据库 查看数据库是否创建成功 修改HTTP的配置文件 浏览器打开 将以下所有目录都加上权限 最后首页效果 mysql命令 是MySQL数据库服务器的客户端工具&#xff0c;它工作在命…

【点云】激光点云建图评测

处理工具 Pcap合并软件 sudo apt install wireshark-common合并Pcap文件&#xff0c;路径为数据文件夹下&#xff0c; #mergecap -w <输出的新Pcap> <输入的Pcap> mergecap -w lidar_output.pcap slice2099-06-01/LIDAR/lidar.pcap slice2099-06-02/LIDAR/lidar…

Java错误:JDBC错误,如何解决和避免

随着Java的广泛应用&#xff0c;Java程序在连接数据库时经常会出现JDBC错误。JDBC&#xff08;Java Database Connectivity&#xff09;是Java中用于连接数据库的编程接口&#xff0c;因此&#xff0c;JDBC错误是在Java程序与数据库交互时遇到的一种错误。下面将介绍一些最常见…

从根到叶:深度理解哈希表

​​​​​​​ 一.哈希表的概念 关于查找元素时&#xff1a; 在顺序结构以及平衡树 中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在 查找一个元素时&#xff0c;必须要经过关键 码的多次比较 。 顺序查找时间复杂度为 O(N) &#xff0c;平衡树中…