Servlet+Thymeleaf + Fetch 实现无刷新异步请求

一、纯前端无刷新（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> 里就能直接用：

java 复制代码

// 纯原生 JS，没有任何依赖
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))

2、对比一下

以前的原生 AJAX（很麻烦）

java 复制代码

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（简洁现代）

java 复制代码

fetch('/api/data')
  .then(res => res.json())
  .then(data => { /* 处理数据 */ });

对比 jQuery（非原生）

java 复制代码

// 需要先引入 jQuery.js
$.get('/api/data', function(data) { ... });

3、 Fetch 原生支持的核心特点

基于 Promise 语法，支持 async/await
支持 GET/POST/PUT/DELETE 等所有请求方法
支持发送 JSON、FormData、文本、文件等
可以处理请求头、跨域、cookie 等
Thymeleaf 页面里直接写 JS 就能用

4、在 Thymeleaf 里最标准的原生写法

html 复制代码

<!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：后端接口处理业务

java 复制代码

@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：前端页面渲染

java 复制代码

    // 归还图书
        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}》归还成功！`);
            }
        }

效果：