fetch发送请求，返回正确，但是表单是空的
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
.button {
padding: 5px 10px;
cursor: pointer;
}
</style>
<%-- <script src="js/jquery.min.js"></script>--%>
<%-- 使用 CDN 引入 jQuery 库，以便在后续的 JavaScript 中使用--%>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>图书管理系统</h1>
<div>
<%--通过 label 标签进行标识--%>
<%--for 属性用于将 <label> 标签与某个表单控件它的值应该与表单控件的 id 属性值相匹配
当用户点击标签文字（在本例中是“图书名称”）时，浏览器会自动将焦点转到与 for="name" 关联的输入框，
即 <input id="name">。这种行为对于提高表单可用性和用户体验非常有用。
<label for="name">图书名称:</label>
--%>
<label for="name">图书名称:</label>
<input type="text" id="name">
<label for="author">作者:</label>
<input type="text" id="author">
<label for="publisher">出版社:</label>
<input type="text" id="publisher">
<button onclick="searchBooks()">查询</button>
</div>
<%--表格用于展示查询结果，包含表头（<thead>）和表体（<tbody>）。--%>
<table id="bookTable">
<thead>
<tr>
<th>图书名称</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 查询结果将插入在这里，Script中 -->
</tbody>
</table>
<script>
// 页面加载时获取所有书籍
//事件处理器，当整个页面（包括所有图像、脚本和样式）完全加载后，onload事件就会触发。
window.onload = function() {
getAllBooks();
};
// 编写获取所有书籍的方法
function getAllBooks() {
fetch('http://localhost:8080/springMVCdemo03_war_exploded/getAll') // 请求所有书籍的接口，fetch 是一个现代 JavaScript API，用于进行网络请求
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.json(); // 解析 JSON 响应
})
.then(data => {
//验证
console.log("Data received:", data);
const tableBody = document.getElementById("bookTable").querySelector("tbody");
tableBody.innerHTML = ""; // 清空现有数据
// 遍历每一本书，创建新的表格行 <tr>
data.forEach(book => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.name}</td>
<td>${book.author}</td>
<td>${book.publisher}</td>
<td>
<button class="button" onclick="toggleBorrow(${JSON.stringify(book)}, this)">${book.isborrowed ? '归还' : '借阅'}</button>
</td>
`;
tableBody.appendChild(row);
});
})
.catch(error => console.error('Error:', error));
}
//通过 fetch向服务器发送 POST 请求以搜索书籍
function searchBooks() {
const name = document.getElementById("name").value;
const author = document.getElementById("author").value;
const publisher = document.getElementById("publisher").value;
// 构建请求体，封装为一个 JavaScript 对象
const requestBody = {
name: name,
author: author,
publisher: publisher
};
fetch('http://localhost:8080/springMVCdemo03_war_exploded/search', {
method: 'POST', // 设置请求方法为 POST
headers: {
'Content-Type': 'application/json;charset=utf-8' // 指定请求体格式为 JSON
},
body: JSON.stringify(requestBody) // 将请求体转换为 JSON 字符串
})
//then 方法用于处理服务器的响应。首先检查响应的状态是否正常（response.ok 为 true），
//如果不正常则抛出一个错误。
//return response.json(); 将响应体解析为 JSON 格式。
.then(response => {
if (!response.ok) { // 检查响应状态是否正常
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.json(); // 解析 JSON 响应
})
//这个部分是一个占位符，表示可以在此处处理从服务器获取的数据。可以根据具体需求对数据进行操作
/* .then(data => {
// 处理返回的数据
})*/
//使用 catch 方法捕获并处理任何可能发生的错误，并在控制台输出错误信息
.catch(error => {
console.error('Error:', error); // 捕获并输出错误
})
//处理服务器返回的数据。首先获取到表格的 tbody 元素并清空现有内容，以便插入新的书籍信息
.then(data => {
const tableBody = document.getElementById("bookTable").querySelector("tbody");
tableBody.innerHTML = ""; // 清空现有数据
//遍历每一本书，创建新的表格行 <tr>，并填充书名、作者和出版社
//该按钮的文本取决于书籍是否被借出（通过 book.borrowed 来判断）。
// 按钮点击时会调用 toggleBorrow 函数，传递书名和当前按钮对象。
//
data.forEach(book => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.name}</td>
<td>${book.author}</td>
<td>${book.publisher}</td>
<td>
<button class="button" onclick="toggleBorrow(${JSON.stringify(book)}, this)">${book.isborrowed ? '归还' : '借阅'}</button>
</td>
`;
tableBody.appendChild(row);
});
})
//处理错误
.catch(error => console.error('Error:', error));
}
//name 表示书籍的名称，button 是用户点击的按钮元素的引用
//fetch 函数向 /change 路径发送一个 POST 请求
function toggleBorrow(book, button) {
fetch('http://localhost:8080/springMVCdemo03_war_exploded/change', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
//将一个对象 { name: name } 转换为 JSON 字符串并作为请求体发送。
body: JSON.stringify(book)
})
.then(response => response.json())
//再次使用 then 方法来处理从服务器返回的数据，isBorrowed 表示书籍当前的借阅状态。
//根据 isBorrowed 的值更新按钮的文本：
.then(isBorrowed => {
button.innerText = isBorrowed ? '归还' : '借阅'; // 更新按钮文本
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
```
