前端（AJAX）学习笔记（CLASS 2）：图书管理案例以及图片上传

肥肠可耐的西西公主2025-02-22 16:45

* BootStrap弹框

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

步骤：

1、引入bootstrap.css和bootstrap.js

2、准备弹框标签，确认结构

3、通过自定义属性，控制弹框的显示和隐藏

其中的bootstrap.css链接为：

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

bootstrap链接为：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

以下是模板代码：

javascript 复制代码 
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

利用自定义属性控制弹框的显示和隐藏

data-bs-toggle="modal"

data-bs-target="#exampleModal"

示例的按钮：

javascript 复制代码 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

如果使用js进行控制：

javascript 复制代码 
        //创建弹框对象
        const modal=new bootstrap.Modal('css选择器')

        //显示弹框
        modal.show()

        //隐藏弹框
        modal.hide()

1、渲染列表

自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查

其中的图书列表接口为：

http://ajax-api.itheima.net/api/books

首先基本的html与css代码为以下：

html 复制代码 
    <!-- 操作列 -->
    <div class="head">
        <h1 class="title">图书管理</h1>
        <button class="add_btn">添加</button>
    </div>
html 复制代码 
    <!-- 图书管理列表 -->
     <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </th>
        </thead>
        <tbody>
            <!-- <tr>
                <th>1</th>
                <th>《java程序设计》</th>
                <th>xxx</th>
                <th>高等教育出版社</th>
                <th>
                    <span class="del">删除</span>
                    <span class="edi">编辑</span>
                </th>
            </tr> -->

        </tbody>
    </table>

以下代码为使用BooyStrap的添加图书弹窗

html 复制代码 
    <!-- 添加图书弹窗 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">图书管理</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div>书名</div>
              <input class="bookname" type="text" placeholder="请输入书籍名称">
              <div>作者</div>
              <input class="author" type="text" placeholder="请输入作者名称">
              <div>出版社</div>
              <input class="publisher" type="text" placeholder="请输入出版社名称">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确定</button>
            </div>
          </div>
        </div>
      </div>

下面为添加图书的js部分：

javascript 复制代码 
        const tbody=document.querySelector('tbody')

        function getBook() {
            axios({
            url:'http://ajax-api.itheima.net/api/books'
        }).then(res => {
            console.log(res)
                tbody.innerHTML=res.data.data.map((item,index) =>`
            <tr>
                <th>${index+1}</th>
                <th>${item.bookname}</th>
                <th>${item.author}</th>
                <th>${item.publisher}</th>
                <th class='${item.id}'>
                    <span class="del">删除</span>
                    <span class="edi">编辑</span>
                </th>
            </tr>`)
            })
        }
        getBook()

        // 添加图书操作
        //创建弹框对象
        const modal=new bootstrap.Modal('.modal')
        const add_btn=document.querySelector('.add_btn')        
        const bookDec=document.querySelectorAll('.modal-body input')
        //显示弹框        
        add_btn.addEventListener('click',() => {
            for(let i=0;i<bookDec.length;i++){
                bookDec[i].value=null
            }
            modal.show() 
        })
        // 添加图书操作

        document.querySelector('.btn-primary').addEventListener('click',() =>{
            axios({
                url:'http://ajax-api.itheima.net/api/books',
                method:'post',
                data:{
                   bookname: bookDec[0].value,
                   author:bookDec[1].value,
                   publisher:bookDec[2].value
                }
            }).then(res => {
                getBook()
                modal.hide()
            })
        })

2、删除数据

当点击删除按钮时，该行的数据将会被删除，并在页面中重新渲染

javascript 复制代码 
        // 删除操作
        document.querySelector('tbody').addEventListener('click',e => {
            if(e.target.className==='del'){
                console.log(e.target.parentNode.className);
                
                const id=e.target.parentNode.className
                axios({
                    url:`http://ajax-api.itheima.net/api/books/${id}`,
                    method:'delete'
                }).then(res => {
                    getBook()
                })
            }
        })

3、修改数据

修改数据部分包括了数据回显以及修改数据

当点击编辑按钮时，会弹出编辑图书弹框

html 复制代码 
      <!-- 编辑图书弹窗 -->
      <div class="modal fade modal_edi" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">图书管理</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body modal_body_edi">
              <div>书名</div>
              <input class="bookname" type="text" placeholder="请输入书籍名称">
              <div>作者</div>
              <input class="author" type="text" placeholder="请输入作者名称">
              <div>出版社</div>
              <input class="publisher" type="text" placeholder="请输入出版社名称">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary edi_btn">修改</button>
            </div>
          </div>
        </div>
      </div>

再修改数据后，点击修改按钮，将进行修改

javascript 复制代码 
       // 点击编辑，获取图书信息
        const modal_edi=new bootstrap.Modal('.modal_edi')
        const modal_body_edi=document.querySelectorAll('.modal_body_edi input')
        document.querySelector('tbody').addEventListener('click',e => {
            if(e.target.className==='edi'){
                modal_edi.show()
                console.log(e.target.parentNode.parentNode.children[0]);
                const id=e.target.parentNode.className
                axios({
                    url:`http://ajax-api.itheima.net/api/books/${id}`
                }).then(res => {
                    console.log(res.data.data)
                    modal_body_edi[0].value=res.data.data.bookname
                    modal_body_edi[1].value=res.data.data.author
                    modal_body_edi[2].value=res.data.data.publisher
                    
                     //点击修改按钮，对图书信息进行修改
                    document.querySelector('.edi_btn').addEventListener('click',() => {
                        axios({
                            url:`http://ajax-api.itheima.net/api/books/${id}`,
                            method:'put',
                            data:{
                                bookname:modal_body_edi[0].value,
                                author:modal_body_edi[1].value,
                                publisher:modal_body_edi[2].value
                            }
                        }).then(edi_res =>{
                            getBook()
                        })
                        modal_edi.hide()
                    })
                }).catch(err => console.log(err))
            }
        })

* 图片上传

1、获取图片文件对象

2、使用FormData携带图片文件

javascript 复制代码 
const fd=new FormData()
fd.append(参数名,值)

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

相关推荐
_Kayo_2 小时前
node.js 学习笔记3 HTTP
笔记·学习
加班是不可能的，除非双倍日工资4 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi5 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
CCCC13101635 小时前
嵌入式学习（day 28）线程
jvm·学习
gnip5 小时前
vite和webpack打包结构控制
前端·javascript
excel5 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
星星火柴9366 小时前
关于“双指针法“的总结
数据结构·c++·笔记·学习·算法
小狗爱吃黄桃罐头6 小时前
正点原子【第四期】Linux之驱动开发篇学习笔记-1.1 Linux驱动开发与裸机开发的区别
linux·驱动开发·学习
阿华的代码王国6 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼6 小时前
Kotlin 基本数据类型（三）：Booleans、Characters
android·前端·kotlin
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09全球最强模型Grok4，国内已可免费使用！（附教程）10TRAE Rules 实践：为项目配置 6A 工作流