学习记录-Ajax-图书列表渲染

最新推荐文章于 2025-12-10 09:11:08 发布
原创 最新推荐文章于 2025-12-10 09:11:08 发布 · 695 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #ajax #前端

目录

图书列表渲染功能描述

  1. 页面刷新时，列表自动渲染图书列表数据
  2. 已渲染的图书列表数据可以进行编辑和删除功能
  3. 点击添加按钮，可以添加图书信息，并将其渲染到页面上

图书列表渲染实现步骤

1.准备工作

了解axios函数的基本使用
引入

	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>

使用

	axios({
	url:'请求网址',
	method:'请求方式',		//默认为get
	params:{}				//get请求参数
	data:{}					//post请求参数
	})

了解bootstrap表单和formserialize的基本使用
引入

	<script src="./lib/form-serialize.js"></script>				//本地form-serialize引入
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js">

使用

	const {结构的变量名称}=form-serialize('表单名',{hash:true,empty:true})			//hash为true将数据转换为哈希值，推荐使用。empty为true可以接受空值

准备合适的接口
自行准备

2.数据渲染

先从后台请求数据，将请求的数据映射到对应列表的位置上

    const list = document.querySelector('.list')			//渲染位置
	function addData() {						//封装渲染函数，要复用
	  axios({
	    url: 'http://hmajax.itheima.net/api/books',
	    params: {					//保证数据请求格式正确
	      creator: 'Tom'
	    }
	  }).then(res => {
	    const arr = res.data.data
	    const str = arr.map(item => {					//使用map映射
	      return `<tr>
	            <td>${item.id}</td>
	            <td>${item.bookname}</td>
	            <td>${item.author}</td>
	            <td>${item.publisher}</td>
	            <td>
	              <span class="del">删除</span>
	              <span class="edit">编辑</span>
	            </td>
	          </tr>`
	    })
	    document.querySelector('.list').innerHTML = str					//将所得数据写入到指定位置
	  })
	}
	addData()

实现效果
在这里插入图片描述

3.数据添加

给添加按钮绑定点击事件，当点击时，打开添加弹窗，自动收集弹窗中表单的数据，将其发送到服务器中，关闭添加弹窗，再渲染一遍数据

	const plusBtn = document.querySelector('.plus-btn')
	// 添加弹窗
	const addModal = document.querySelector('.add-modal')
	const aModal = new bootstrap.Modal(addModal)
	const addForm = document.querySelector('.add-form')
	plusBtn.addEventListener('click', () => {
	  aModal.show()
	  // 保存添加
	  const addBtn = document.querySelector('.add-btn')
	  addBtn.addEventListener('click', () => {
	    const { bookname, author, publisher } = serialize(addForm, { hash: true, empty: true })
	    const data = {
	      bookname,
	      author,
	      publisher,
	      creator: 'Tom'
	    }
	    axios({
	      url: 'http://hmajax.itheima.net/api/books',
	      method: 'post',
	      data
	    }).then(res => {
	      aModal.hide()
	      addForm.reset()					//添加结束后重置表单
	      addData()
	    })
	
	  })
	})

实现效果
在这里插入图片描述

4.数据删除

利用事件委托给图书列表添加点击事件，当点击到删除按钮时，利用元素节点找到该列表的id值，拼接到url网址上

list.addEventListener('click', (e) => {						//使用事件委托绑定点击事件
  if (e.target.classList.contains('del')) {
    const id = e.target.parentNode.parentNode.children[0].innerHTML
    axios({
      url: `http://hmajax.itheima.net/api/books/${id}`,
      method: 'delete'
    }).then(res => {
      addData()
    })
  }
  ...
  }

实现效果
在这里插入图片描述

5.数据编辑

利用事件委托，当点击到编辑按钮时，打开编辑弹窗，收集渲染列表的数据，并自动收集弹窗中表单的数据，将其发送到服务器中，关闭编辑弹窗，再渲染一遍数据

	  if (e.target.classList.contains('edit')) {
    const id = e.target.parentNode.parentNode.children[0].innerHTML
    const children = e.target.parentNode.parentNode.children
    const bookname = children[1].innerHTML				//遍历列表，保证编辑框打开后存在数据
    const author = children[2].innerHTML
    const publisher = children[3].innerHTML
    eModal.show()
    editForm.querySelector('input[name="bookname"]').value = bookname
    editForm.querySelector('input[name="author"]').value = author
    editForm.querySelector('input[name="publisher"]').value = publisher
    editBtn.addEventListener('click', () => {
      const { bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
      const data = {
        bookname,
        author,
        publisher,
        creator: 'Tom'
      }
      axios({
        url: `http://hmajax.itheima.net/api/books/${id}`,
        method: 'put',
        data
      }).then(res => {
        eModal.hide()
        addData()
        editForm.reset()					//编辑结束后重置表单
      })
    })
  }

实现效果
在这里插入图片描述

完整实例代码

<!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>
  <!-- 字体图标 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css">
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 主体区域 -->
  <div class="container">
    <!-- 头部标题和添加按钮 -->
    <div class="top">
      <h3>图书管理</h3>
      <button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal"> + 添加
      </button>
    </div>
    <!-- 数据列表 -->
    <table class="table">
      <thead class="table-light">
        <tr>
          <th style="width: 150px;">序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th style="width: 180px;">操作</th>
        </tr>
      </thead>
      <tbody class="list">
        
      </tbody>
    </table>
  </div>
  <!-- 新增-弹出框 -->
  <div class="modal fade add-modal">
    <!-- 中间白色区域 -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header top">
          <span>添加图书</span>
          <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body form-wrap">
          <!-- 新增表单 -->
          <form class="add-form">
            <div class="mb-3">
              <label for="bookname" class="form-label">书名</label>
              <input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
            </div>
            <div class="mb-3">
              <label for="author" class="form-label">作者</label>
              <input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
            </div>
            <div class="mb-3">
              <label for="publisher" class="form-label">出版社</label>
              <input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
            </div>
          </form>
        </div>
        <div class="modal-footer btn-group">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button>
          <button type="button" class="btn btn-primary add-btn"> 保存 </button>
        </div>
      </div>
    </div>
  </div>
  <!-- 编辑-弹出框 -->
  <div class="modal fade edit-modal">
    <!-- 中间白色区域 -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header top">
          <span>编辑图书</span>
          <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body form-wrap">
          <!-- 编辑表单 -->
          <form class="edit-form">
            <input type="hidden" class="id" name="id">
            <div class="mb-3">
              <label for="bookname" class="form-label">书名</label>
              <input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
            </div>
            <div class="mb-3">
              <label for="author" class="form-label">作者</label>
              <input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
            </div>
            <div class="mb-3">
              <label for="publisher" class="form-label">出版社</label>
              <input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
            </div>
          </form>
        </div>
        <div class="modal-footer btn-group">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button>
          <button type="button" class="btn btn-primary edit-btn"> 修改 </button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
  <!-- 核心逻辑 -->
  <script>
    // 数据渲染
const list = document.querySelector('.list')
function addData() {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator: 'Tom'
    }
  }).then(res => {
    const arr = res.data.data
    const str = arr.map(item => {
      return `<tr>
            <td>${item.id}</td>
            <td>${item.bookname}</td>
            <td>${item.author}</td>
            <td>${item.publisher}</td>
            <td>
              <span class="del">删除</span>
              <span class="edit">编辑</span>
            </td>
          </tr>`
    })
    document.querySelector('.list').innerHTML = str
  })
}
addData()
// 数据添加
// 添加按钮
const plusBtn = document.querySelector('.plus-btn')
// 添加弹窗
const addModal = document.querySelector('.add-modal')
const aModal = new bootstrap.Modal(addModal)
const addForm = document.querySelector('.add-form')
plusBtn.addEventListener('click', () => {
  aModal.show()
  // 保存添加
  const addBtn = document.querySelector('.add-btn')
  addBtn.addEventListener('click', () => {
    const { bookname, author, publisher } = serialize(addForm, { hash: true, empty: true })
    const data = {
      bookname,
      author,
      publisher,
      creator: 'Tom'
    }
    axios({
      url: 'http://hmajax.itheima.net/api/books',
      method: 'post',
      data
    }).then(res => {
      aModal.hide()
      addForm.reset()
      addData()
    })

  })
})
// 删除数据
const editModal = document.querySelector('.edit-modal')
const eModal = new bootstrap.Modal(editModal)
const editBtn = document.querySelector('.edit-btn')
const editForm = document.querySelector('.edit-form')
list.addEventListener('click', (e) => {
  if (e.target.classList.contains('del')) {
    const id = e.target.parentNode.parentNode.children[0].innerHTML
    axios({
      url: `http://hmajax.itheima.net/api/books/${id}`,
      method: 'delete'
    }).then(res => {
      addData()
    })
  }
  //编辑数据
  if (e.target.classList.contains('edit')) {
    const id = e.target.parentNode.parentNode.children[0].innerHTML
    const children = e.target.parentNode.parentNode.children
    console.log(children)
    const bookname = children[1].innerHTML
    const author = children[2].innerHTML
    const publisher = children[3].innerHTML
    eModal.show()
    editForm.querySelector('input[name="bookname"]').value = bookname
    editForm.querySelector('input[name="author"]').value = author
    editForm.querySelector('input[name="publisher"]').value = publisher
    editBtn.addEventListener('click', () => {
      const { bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
      const data = {
        bookname,
        author,
        publisher,
        creator: 'Tom'
      }
      axios({
        url: `http://hmajax.itheima.net/api/books/${id}`,
        method: 'put',
        data
      }).then(res => {
        eModal.hide()
        addData()
        editForm.reset()
      })
    })
  }
})
  </script>
</body>

</html>
Node.js学习笔记--进阶之路
JackieDYH的博客
05-10 2442
简介 Node 是一个软件, 可以脱离浏览器, 独立执行JS文件 Node实现了ECMAScript标准, 所以语言跟JavaScript基本一致 因为想成为全栈开发(前后端都可以的大拿) PHP等语言是阻塞的, 性能不如nodeJS node是事件驱动, 非阻塞的 Node中是大量的, 事件和回调函数 单线程（主线程单线程，后台I/O线程池） 跨平台 (Node软件可以安装在window系统/linux系统/mac系统/等等) 安装Node ...
如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios
m0_67402096的博客
03-06 516
如何快速入门Ajax 1. 服务器的基本概念 客户端与服务器 URL地址 网页中如何请求数据 资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax get() post() ajax() 接口 4. form表单的基本使用 组成部分 属性 action target method enctype 表单的同步提交 缺点 解决方案 serialize() 函数 5. 原生Ajax XMLHttpRequest
Ajax-day2（图书管理）-渲染列表
qq_65077739的博客
09-14 1203
本文介绍了基于Bootstrap框架实现的图书管理系统前端页面开发。主要内容包括：1）使用Bootstrap构建响应式界面，包含图书列表展示、新增/编辑表单弹窗；2）实现图书数据的增删改查功能；3）项目结构包含HTML页面、CSS样式和JavaScript交互逻辑；4）采用axios进行数据请求，整合表单序列化工具。系统默认提供三本初始图书数据，用户可自定义名称并进行完整CRUD操作。关键代码展示了表格渲染、模态框交互等核心实现。
Jquery-Ajax使用笔记
只写有用的笔记
06-05 270
通过图书管理和聊天机器人详细介绍JQ中Ajax使用方法，以及后端给到的各种形式api闭坑最近学习了Jquery中封装的Ajax，2023年都说JQ已经过时了，虽然我没去学不过看起来还蛮好理解的，JQ有啥不懂请自行查阅。
AJAX-个人学习笔记
m0_69356164的博客
04-12 1045
个人关于AJAX入门和基础的学习笔记，不喜勿看，有侵权请联系作者
01-Ajax第一天学习笔记
孤城星空的博客
04-07 76
概念，接口，机器人
JavaScript -- ajax相关知识点的笔记
m0_56387086的博客
08-19 913
视频地址：【黑马程序员AJAX零基础到精通_整合Git核心内容全套教程】 https://www.bilibili.com/video/BV1zs411h74a?
ajax学习笔记
m0_74375748的博客
08-23 1459
统一资源定位符，简称网址逻辑更清晰了解axios函数内部运作能解决回调函数地狱的问题概念：访问权限的令牌，本质上是一串字符串创建：正确登陆后，由后端签发并返回成功作用：判断是否有登陆状态，控制访问权限前端只能判断有无token，后端判断真实性。
Ajax学习笔记
小陈从不熬夜
08-21 1633
Ajax学习笔记
AJAX笔记-day03
m0_61508901的博客
12-03 1402
day03笔记概念
小白ajax入门学习笔记
weixin_51877011的博客
08-27 1261
定义：https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX概念：AJAX 是浏览器与服务器进行数据通信的技术AJAX 有什么用？➢ 浏览器和服务器之间通信，动态数据交互AJAX 如何学：➢ 先掌握 axios 使用➢ 再了解 XMLHttpRequest 原理这一节 axios 体验步骤？➢ 引入 axios 库➢ 使用 axios 语法概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源。
Ajax笔记
菜鸡成长站
04-23 2648
title: Ajax categories: web前端学习笔记 date: 2022-03-01 15:27:51 tags: 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 URL地址 组成部分 通信协议，存放该资源.
疯狂Ajax讲义第三版源码分享01-05
“HTTP请求”方面，源码将演示不同类型的请求方式：GET用于获取数据（如查询列表、加载详情），POST用于提交数据（如表单提交、文件上传），PUT/PATCH用于更新资源，DELETE用于删除记录。每种请求都需要正确设置...
学习离线处理 [CSP-J 2022 山东] 部署
SHOJYS的博客
12-09 736
所谓离线, 就是等你操作完了后再问你问题, 每一次操作时间复杂度可能很大, 我们可以把操作堆起来最后一遍完成.我们记录完之后, 就是要统计答案了. 我们不妨先思考操作二该怎么统计., 而对于其子节点和祖先而言, 兵力都要增加。我们不妨记录两个内容, 一个是操作一在节点。最后展示总代码, 当然肯定与上述有部分出入.. 但问题来了, 它的子树都要增加。要求增加的兵, 不妨将其设为。要求增加的兵, 不妨将其设为。我们再思考操作一该怎么统计.而言, 其增加的兵力就是。而言, 其兵力增加就是。我们首先记录所有操作,
周学习记录
qq_61434514的博客
12-08 303
看了三篇论文，准备对RDD进行复现。下周计划继续看一定论文数，对RDD进行复现。
学习笔记095——Ubuntu 安装 lrzsz 服务？
最新发布
code__bee的博客
12-10 344
lrzsz是一款基于协议的文件传输工具集，专门用于在终端环境下实现本地与远程服务器之间的文件上传和下载，是 Linux/Unix 运维和开发场景中常用的轻量级工具。
防爆标识学习
qincjun的博客
12-08 292
设备保护等级:Equipment Protection Level 其实是指设备能应用在哪一个区域；防爆:指这个设备可以在有或可能有可燃或爆炸性的气体蒸气、粉尘等环境中使用。粉尘用G表示，矿井用M表示，气体用G表示。a.b.c.用于表示零区，一区，二区.Ga:比设备可用于爆炸性气体零区；
车软嵌入式AUTOSAR学习教材推荐
ACarSoft的博客
12-07 659
摘要：Vector作为AUTOSAR解决方案头部供应商，其工具链和基础软件是行业标配。本文推荐三大类学习资料：1）官方权威资源（E-Learning课程、技术手册）；2）专项实战书籍（自适应平台开发、MCAL原理）；3）资料获取技巧（版本筛选、标准文档）。建议按照"基础→实战→进阶"路径系统学习，既掌握工具操作又理解标准原理。适合不同阶段的AUTOSAR学习者参考，可帮助快速从入门到独立开发。
KM-ViPE 论文学习
calvinpaean的博客
12-08 1043
本文提出了一个名为 KM-ViPE（知识映射视频姿态引擎）​ 的新系统。传统 SLAM 的局限内容单一：传统SLAM（基于点、线、面等几何基元）只能重建几何结构，缺乏语义信息（不知道物体是什么）。场景脆弱：在动态环境中，运动物体会破坏帧与帧之间的数据关联，导致系统性能严重下降甚至失效。KM-ViPE 旨在克服这些限制。KM-ViPE 的核心创新与特点如下输入要求极低：​ 仅需单个普通RGB摄像头的原始视频流，无需深度传感器，也无需事先对相机进行参数标定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值