一、纯前端无刷新（AJAX）的标准实现方案：
- Fetch API：原生 JS 异步请求，不刷新页面更新数据
- Servlet：后端接口，处理业务逻辑，返回 JSON/HTML 片段
- Thymeleaf：前端页面渲染
二、Fetch API
定义： Fetch API 是浏览器原生自带的 JavaScript API，不需要引入任何第三方库（比如 jQuery、axios），直接就能用。
作用：在前端发异步网络请求（AJAX），实现页面无刷新获取数据。
文档：https://www.runoob.com/ajax/fetch-api.html
1、为什么说它是 “原生 JS”
- 由浏览器标准内置，不用下载、不用 npm、不用 script 引入
- 所有现代浏览器（Chrome、Firefox、Edge、Safari）都原生支持
- 是XMLHttpRequest（AJAX 原生对象）的现代化替代方案
在<script>里就能直接用：
// 纯原生 JS，没有任何依赖 fetch('/api/data') .then(res => res.json()) .then(data => console.log(data))2、 对比一下
以前的原生 AJAX（很麻烦）
let xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data'); xhr.onload = function() { if (xhr.status === 200) { let data = JSON.parse(xhr.responseText); } }; xhr.send();现在的原生 Fetch（简洁现代）
fetch('/api/data') .then(res => res.json()) .then(data => { /* 处理数据 */ });对比 jQuery（非原生）
// 需要先引入 jQuery.js $.get('/api/data', function(data) { ... });3、 Fetch 原生支持的核心特点
- 基于Promise语法，支持
async/await - 支持 GET/POST/PUT/DELETE 等所有请求方法
- 支持发送 JSON、FormData、文本、文件等
- 可以处理请求头、跨域、cookie 等
- Thymeleaf 页面里直接写 JS 就能用
4、 在 Thymeleaf 里最标准的原生写法
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> </head> <body> <div id="result"></div> <script> // 完全原生 JS，没有任何外部依赖 fetch('bookServlet?method=list') .then(res => res.text()) .then(data => { document.getElementById('result').innerText = data; }); </script> </body> </html>总而言之：
- Fetch = 浏览器原生自带的异步请求工具
- 不需要 jQuery、不需要 axios、不需要任何库
- 在 Thymeleaf 里就是写普通 JS，直接用
fetch()就行- 实现无刷新加载数据，就是靠它
三、Servlet：后端接口处理业务
@WebServlet("/borrowServlet") public class BorrowServlet extends ModelServlet { public void return_record(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("执行return_record方法..."); //模板引擎对象 CustomTemplateEngine engine = CustomTemplateEngine.getInstance(req); try { //获取借阅记录id int id = Integer.parseInt(req.getParameter("id")); //修改到借阅记录表中 int count0= borrowdService.editRecordById(id); //修改书籍库存+1 int count1 = bookService.editStock(id, 2); // System.out.println(count); // 返回简单的文本（页面需要返回一个） resp.getWriter().write((count0 > 0 && count1>0) ? "success" : "fail"); } catch (Exception e) { e.printStackTrace(); } } }四、Thymeleaf：前端页面渲染
// 归还图书 function handleReturn(recordId) { const record = borrowRecords.find(r => r.id === recordId); if (record) { const today = new Date().toISOString().split('T')[0]; record.returnDate = today; record.status = 'RETURNED'; renderTable(); //alert(recordId) //使用无刷新来处理归还操作！ //前端(使用 Fetch API) // 3. 发起 Fetch 请求 // fetch() 返回的是一个 Promise fetch('borrowServlet?method=return_record&id=' + recordId) .then(response => response.text()) // 将响应体转换为文本 .then(data => { // 处理响应数据 if (data=="success") { console.log('归还成功！'); } else { console.log('归还失败！'+ data.message); } }) .catch(error => { console.error('请求失败：', error); }); // alert('归还成功！'); alert(`《${record.bookname}》归还成功！`); } }效果：
