前端技术Ajax实战

1.1 案例_图书管理-介绍

目标

掌握图书管理案例的增删改查业务和 Bootstrap 弹框的使用。

讲解

1. 运行图书管理案例效果

展示增删改查业务效果，并使用 Bootstrap 弹框承载表单。

2. 分析步骤

学习 Bootstrap 弹框（用于添加和编辑图书）。
渲染图书列表（先渲染数据，方便后续操作）。
新增图书功能。
删除图书功能。
编辑图书功能（注意：新增和编辑使用不同弹框）。

小结

收获：掌握前端经典增删改查业务和思路，对后续开发很有帮助。

1.2 Bootstrap 弹框_属性控制

目标

使用属性方式控制 Bootstrap 弹框的显示和隐藏。

讲解

1. 什么是 Bootstrap 弹框？

在当前页面显示单独内容，供用户操作。

2. 需求

点击按钮显示弹框，点击关闭按钮隐藏弹框。

3. 使用步骤

引入 bootstrap.css 和 bootstrap.js。
准备弹框标签结构（从官方文档复制）。
通过自定义属性控制弹框：
复制代码
html

|---|-------------------------------------------------------------------------|
| | <button data-bs-toggle="modal" data-bs-target=".my-box">显示弹框</button> |
| | <button data-bs-dismiss="modal">Close</button> |

4. 示例代码

复制代码

html

|---|----------------------------------------------------------------------------------------------------------|
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Bootstrap 弹框</title> |
| | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> |
| | </head> |
| | <body> |
| | <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box"> |
| | 显示弹框 |
| | </button> |
| | |
| | <div class="modal my-box" tabindex="-1"> |
| | <div class="modal-dialog"> |
| | <div class="modal-content"> |
| | <div class="modal-header"> |
| | <h5 class="modal-title">Modal title</h5> |
| | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| | </div> |
| | <div class="modal-body"> |
| | <p>Modal body text goes here.</p> |
| | </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> |
| | |
| | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script> |
| | </body> |
| | </html> |

小结

控制显示属性 ：data-bs-toggle 和 data-bs-target。
控制隐藏属性 ：data-bs-dismiss。

1.3 Bootstrap 弹框_JS控制

目标

使用 JS 方式控制 Bootstrap 弹框的显示和隐藏。

讲解

1. 为什么需要 JS 控制？

在显示/隐藏前需要执行 JS 逻辑（如填充默认值或获取用户输入）。

2. JS 控制语法

复制代码

javascript

|---|------------------------------------------------------|
| | const modalDom = document.querySelector('css选择器'); |
| | const modal = new bootstrap.Modal(modalDom); |
| | |
| | // 显示弹框 |
| | modal.show(); |
| | // 隐藏弹框 |
| | modal.hide(); |

3. 示例代码

复制代码

javascript

|---|-------------------------------------------------------------------------|
| | const modalDom = document.querySelector('.name-box'); |
| | const modal = new bootstrap.Modal(modalDom); |
| | |
| | document.querySelector('.edit-btn').addEventListener('click', () => { |
| | document.querySelector('.username').value = '默认姓名'; |
| | modal.show(); |
| | }); |
| | |
| | document.querySelector('.save-btn').addEventListener('click', () => { |
| | const username = document.querySelector('.username').value; |
| | console.log('模拟把姓名保存到服务器上', username); |
| | modal.hide(); |
| | }); |

小结

使用场景：直接显示/隐藏用属性控制，需执行 JS 逻辑时用 JS 控制。

1.4 案例_图书管理_渲染列表

目标

完成图书管理案例的图书列表数据渲染。

讲解

1. 需求

使用 axios 获取图书列表数据，并渲染到页面。

2. 步骤

获取数据。
渲染数据到页面。

3. 核心代码

复制代码

javascript

|---|--------------------------------------------------------|
| | const creator = '老张'; |
| | function getBooksList() { |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/books', |
| | params: { creator } |
| | }).then(result => { |
| | const bookList = result.data.data; |
| | const htmlStr = bookList.map((item, index) => { |
| | return `<tr> |
| | <td>${index + 1}</td> |
| | <td>${item.bookname}</td> |
| | <td>${item.author}</td> |
| | <td>${item.publisher}</td> |
| | <td data-id=${item.id}> |
| | <span class="del">删除</span> |
| | <span class="edit">编辑</span> |
| | </td> |
| | </tr>`; |
| | }).join(''); |
| | document.querySelector('.list').innerHTML = htmlStr; |
| | }); |
| | } |
| | getBooksList(); |

小结

渲染步骤：获取数据，渲染到页面。

1.5 案例_图书管理_新增图书

目标

完成图书管理案例的新增图书功能。

讲解

1. 需求

点击添加按钮显示弹框，填写图书信息并提交到服务器，刷新列表。

2. 步骤

控制弹框显示/隐藏。
收集表单数据并提交。
刷新图书列表。

3. 核心代码

复制代码

javascript

|---|------------------------------------------------------------------------|
| | const addModalDom = document.querySelector('.add-modal'); |
| | const addModal = new bootstrap.Modal(addModalDom); |
| | |
| | document.querySelector('.add-btn').addEventListener('click', () => { |
| | const addForm = document.querySelector('.add-form'); |
| | const bookObj = serialize(addForm, { hash: true, empty: true }); |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/books', |
| | method: 'POST', |
| | data: { ...bookObj, creator } |
| | }).then(result => { |
| | getBooksList(); |
| | addForm.reset(); |
| | addModal.hide(); |
| | }); |
| | }); |

小结

新增步骤：准备表单，收集数据提交，刷新列表。

1.6 案例_图书管理_删除图书

目标

完成图书管理案例的删除图书功能。

讲解

1. 需求

点击删除按钮，删除对应图书数据并刷新列表。

2. 步骤

绑定删除按钮点击事件。
调用删除接口。
刷新图书列表。

3. 核心代码

复制代码

javascript

|---|--------------------------------------------------------------------|
| | document.querySelector('.list').addEventListener('click', e => { |
| | if (e.target.classList.contains('del')) { |
| | const theId = e.target.parentNode.dataset.id; |
| | axios({ |
| | url: `http://hmajax.itheima.net/api/books/${theId}`, |
| | method: 'DELETE' |
| | }).then(() => { |
| | getBooksList(); |
| | }); |
| | } |
| | }); |

小结

删除步骤：获取 ID，调用接口，刷新列表。

1.7 案例_图书管理_编辑图书

目标

完成图书管理案例的编辑图书功能。

讲解

1. 需求

编辑图书数据并回显到表单，提交保存后刷新列表。

2. 步骤

绑定编辑按钮点击事件。
获取图书详情并回显到表单。
提交修改并刷新列表。

3. 核心代码

复制代码

javascript

|---|-------------------------------------------------------------------------------------------------|
| | const editDom = document.querySelector('.edit-modal'); |
| | const editModal = new bootstrap.Modal(editDom); |
| | |
| | document.querySelector('.list').addEventListener('click', e => { |
| | if (e.target.classList.contains('edit')) { |
| | const theId = e.target.parentNode.dataset.id; |
| | axios({ |
| | url: `http://hmajax.itheima.net/api/books/${theId}``` | | | `}).then(result => {` | | | `const bookObj = result.data.data;` | | | `Object.keys(bookObj).forEach(key => {` | | | document.querySelector(.edit-form .${key}).value = bookObj[key]; | | | `});` | | | `});` | | | `editModal.show();` | | | `}` | | | `});` | | | | | | `document.querySelector('.edit-btn').addEventListener('click', () => {` | | | `const editForm = document.querySelector('.edit-form');` | | | `const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true });` | | | `axios({` | | |url: http://hmajax.itheima.net/api/books/${id},`` |
| | method: 'PUT', |
| | data: { bookname, author, publisher, creator } |
| | }).then(() => { |
| | getBooksList(); |
| | editModal.hide(); |
| | }); |
| | }); |

小结

编辑步骤：获取数据并回显，收集数据提交，刷新列表。

1.8 案例_图书管理_总结

目标

总结增删改查的核心思路。

讲解

1. 增删改查核心思路

渲染列表：获取数据 → 渲染数据。
新增数据：准备表单 → 收集数据提交 → 刷新列表。
删除数据：绑定点击事件 → 调用接口 → 刷新列表。
编辑数据：回显数据 → 收集修改数据 → 提交保存 → 刷新列表。

小结

收获：掌握增删改查通用思路，可应用于其他数据管理。

1.9 图片上传

目标

实现本地图片上传并显示到网页。

讲解

1. 需求

上传本地图片到服务器，获取 URL 并显示到 img 标签。

2. 步骤

获取图片文件对象。
使用 FormData 提交文件。
提交到服务器并显示图片。

3. 核心代码

复制代码

html

|---|-----------------------------------------------------------------------|
| | <input type="file" class="upload"> |
| | <img src="" alt="" class="my-img"> |
| | |
| | <script> |
| | document.querySelector('.upload').addEventListener('change', e => { |
| | 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 => { |
| | const imgUrl = result.data.data.url; |
| | document.querySelector('.my-img').src = imgUrl; |
| | }); |
| | }); |
| | </script> |

小结

思路：获取文件 → 装入 FormData → 提交服务器 → 获取 URL 显示。

1.10 案例_网站-更换背景图

目标

实现网站背景图更换效果。

讲解

1. 需求

上传图片并设置为网页背景，刷新后保留背景图。

2. 步骤

上传图片并设置背景。
保存图片 URL 到 localStorage。
网页加载时从 localStorage 获取 URL 并设置背景。

3. 核心代码

复制代码

javascript

|---|-----------------------------------------------------------------------|
| | document.querySelector('.bg-ipt').addEventListener('change', e => { |
| | 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 => { |
| | const imgUrl = result.data.data.url; |
| | document.body.style.backgroundImage = `url(${imgUrl})`; |
| | localStorage.setItem('bgImg', imgUrl); |
| | }); |
| | }); |
| | |
| | const bgUrl = localStorage.getItem('bgImg'); |
| | bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`); |

小结

localStorage ：getItem 取值，setItem 赋值。

1.11 案例_个人信息设置-介绍

目标

介绍个人信息设置案例的功能和实现步骤。

讲解

1. 需求

实现信息回显、头像修改、信息修改和提示框反馈。

2. 步骤

信息回显。
头像修改。
信息修改。
提示框反馈。

1.12 案例_个人信息设置-信息渲染

目标

渲染用户信息到页面。

讲解

1. 需求

根据外号获取用户信息并渲染到页面。

2. 核心代码

复制代码

javascript

|---|-------------------------------------------------------------|
| | const creator = '播仔'; |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/settings', |
| | params: { creator } |
| | }).then(result => { |
| | const userObj = result.data.data; |
| | Object.keys(userObj).forEach(key => { |
| | if (key === 'avatar') { |
| | document.querySelector('.prew').src = userObj[key]; |
| | } else if (key === 'gender') { |
| | const gRadioList = document.querySelectorAll('.gender'); |
| | const gNum = userObj[key]; |
| | gRadioList[gNum].checked = true; |
| | } else { |
| | document.querySelector(`.${key}`).value = userObj[key]; |
| | } |
| | }); |
| | }); |

小结

思路：获取数据 → 渲染到页面。

1.13 案例_个人信息设置-头像修改

目标

修改用户头像并立即生效。

讲解

1. 需求

上传头像文件并更新页面显示。

2. 核心代码

复制代码

javascript

|---|-----------------------------------------------------------------------|
| | document.querySelector('.upload').addEventListener('change', e => { |
| | const fd = new FormData(); |
| | fd.append('avatar', e.target.files[0]); |
| | fd.append('creator', creator); |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/avatar', |
| | method: 'PUT', |
| | data: fd |
| | }).then(result => { |
| | const imgUrl = result.data.data.avatar; |
| | document.querySelector('.prew').src = imgUrl; |
| | }); |
| | }); |

小结

原因：需要携带外号以保存到对应用户。

1.14 案例_个人信息设置-信息修改

目标

提交用户修改的信息到服务器。

讲解

1. 需求

收集表单数据并提交到服务器保存。

2. 核心代码

复制代码

javascript

|---|-----------------------------------------------------------------------|
| | document.querySelector('.submit').addEventListener('click', () => { |
| | const userForm = document.querySelector('.user-form'); |
| | const userObj = serialize(userForm, { hash: true, empty: true }); |
| | userObj.creator = creator; |
| | userObj.gender = +userObj.gender; |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/settings', |
| | method: 'PUT', |
| | data: userObj |
| | }).then(result => { |
| | }); |
| | }); |

小结

思路：收集数据 → 提交保存。

1.15 案例_个人信息设置-提示框

目标

使用提示框反馈用户操作结果。

讲解

1. 需求

使用 Bootstrap 的 toast 提示框显示操作结果。

2. 核心代码

复制代码

javascript

|---|-----------------------------------------------------------------------|
| | document.querySelector('.submit').addEventListener('click', () => { |
| | // ...提交数据代码... |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/settings', |
| | method: 'PUT', |
| | data: userObj |
| | }).then(result => { |
| | const toastDom = document.querySelector('.my-toast'); |
| | const toast = new bootstrap.Toast(toastDom); |
| | toast.show(); |
| | }); |
| | }); |

小结

使用场景：需执行 JS 逻辑后显示/隐藏弹框时。