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

前端技术Ajax实战

news 来源：原创 2025/4/27 9:17:58

1.1 案例_图书管理-介绍

目标

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

讲解

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

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

2. 分析步骤

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

小结

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

1.2 Bootstrap 弹框_属性控制

目标

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

讲解

1. 什么是 Bootstrap 弹框？

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

2. 需求

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

3. 使用步骤

  1. 引入 bootstrap.css 和 bootstrap.js。
  2. 准备弹框标签结构（从官方文档复制）。
  3. 通过自定义属性控制弹框： 
     
    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. 步骤
 

  1. 获取数据。
  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. 步骤
 

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

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. 步骤
 

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

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. 步骤
 

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

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. 渲染列表：获取数据 → 渲染数据。
  2. 新增数据：准备表单 → 收集数据提交 → 刷新列表。
  3. 删除数据：绑定点击事件 → 调用接口 → 刷新列表。
  4. 编辑数据：回显数据 → 收集修改数据 → 提交保存 → 刷新列表。
 

小结
 

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

 

1.9 图片上传
 

目标
 

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

讲解
 

1. 需求
 

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

2. 步骤
 

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

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. 步骤
 

  1. 上传图片并设置背景。
  2. 保存图片 URL 到 localStorage。
  3. 网页加载时从 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. 信息回显。
  2. 头像修改。
  3. 信息修改。
  4. 提示框反馈。
 

 

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 逻辑后显示/隐藏弹框时。
 

 



                
                

                  

                    
                      
                  



                

                

                  
相关文章：

                    
                      
  • 
                        06-stm32时钟体系
                      
    • 
                    
                      
  • 
                        企业部署Power BI 报表服务器，在第三方系统嵌套该报表服务器，并实现单点登录
                      
    • 
                    
                      
  • 
                        【linux】Chrony服务器
                      
    • 
                    
                      
  • 
                        HTML 详解：从基础结构到语义标签
                      
    • 
                    
                      
  • 
                        【音视频】⾳频处理基本概念及⾳频重采样
                      
    • 
                    
                      
  • 
                        NAT地址转换
                      
    • 
                    
                      
  • 
                        使用 AutoGen 与 Elasticsearch
                      
    • 
                    
                      
  • 
                        代码随想录算法训练营第五十八天 | 1.拓扑排序精讲 2.dijkstra(朴素版)精讲 卡码网117.网站构建 卡码网47.参加科学大会
                      
    • 
                    
                      
  • 
                        二项分布详解：从基础到应用
                      
    • 
                    
                      
  • 
                        websheet 之 单元格
                      
    • 
                    
                      
  • 
                        蓝桥杯 5. 交换瓶子
                      
    • 
                    
                      
  • 
                        Flutter Dart 集合类型List Set Map详解军 以及循环语句 forEaclh map where any every
                      
    • 
                    
                      
  • 
                        Redis ⑥-string | hash | list
                      
    • 
                    
                      
  • 
                        【计算机视觉】CV实战 - 基于YOLOv5的人脸检测与关键点定位系统深度解析
                      
    • 
                    
                      
  • 
                        八大排序——冒泡排序/归并排序
                      
    • 
                    
                      
  • 
                        如何创建极狐GitLab 私密议题？
                      
    • 
                    
                      
  • 
                        UML 类图基础和类关系辨析
                      
    • 
                    
                      
  • 
                        基于Java(JSP)+MySQL实现深度学习的音乐推荐系统
                      
    • 
                    
                      
  • 
                        成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
                      
    • 
                    
                      
  • 
                        微软官网Win10镜像下载快速获取ISO文件
                      
    • 
                    

  • 持续更新丨伊朗官员：港口爆炸已致5人死亡超700人受伤
    • 


  • 中法共创《海底两万里》，演员保剑锋重回戏剧舞台演船长
    • 


  • 夜读丨囿于厨房与爱
    • 


  • 印巴在克什米尔实控线附近小规模交火，巴防长发出“全面战争”警告
    • 


  • 石磊当选河北秦皇岛市市长
    • 


  • 见微知沪｜最大力度消费补贴，最大程度满足人们对美好生活的向往
    •