已知图书有三个属性(id,name,pressId),出版社有2个属性(id,name) 其中图书的pressId对应出版社的id 图书查询接口/book/getBookById,出版社查询接口/book/getPress, ajax请求返回对象放在Model中 请编写一个html页面实现图书的修改,使用thymeleaf+jquery的方式,要求出版社是下拉框形式
时间: 2024-03-04 10:53:56 浏览: 114
基于servlet+jsp,还有jQuery和Boostrap,简单的一个小实验,是图书管理系统,可以对图书进行增删改查.zip
好的,那我来为您编写一个示例代码,以供参考。
首先,您需要在后端编写两个接口,分别是/book/getBookById和/book/getPress,用于查询图书和出版社的信息。这里我假设您已经编写好了这两个接口,并且可以返回正确的数据。
然后,您需要在前端编写一个HTML页面,使用Thymeleaf和jQuery实现图书的修改功能。下面是示例代码:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>图书管理系统 - 修改图书信息</title>
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>修改图书信息</h1>
<form id="bookForm">
<input type="hidden" name="id" th:value="${book.id}">
<label>图书名称:</label>
<input type="text" name="name" th:value="${book.name}"><br>
<label>出版社:</label>
<select name="pressId" id="pressSelect">
<!-- 根据已有的出版社信息生成下拉框选项 -->
<option value="">请选择出版社</option>
<th:block th:each="press : ${pressList}">
<option th:value="${press.id}" th:selected="${press.id == book.pressId}" th:text="${press.name}"></option>
</th:block>
</select><br>
<button type="submit">保存</button>
</form>
<script type="text/javascript">
// 当页面加载完成后执行
$(function () {
// 绑定表单提交事件
$("#bookForm").submit(function (event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 调用保存图书信息的函数
saveBook();
});
// 加载出版社信息
loadPressList();
});
// 加载出版社信息
function loadPressList() {
$.ajax({
url: "/book/getPress",
type: "GET",
success: function (data) {
// 将查询结果存储到Model中
var pressList = data;
// 根据已有的出版社信息生成下拉框选项
var options = "";
options += '<option value="">请选择出版社</option>';
for (var i = 0; i < pressList.length; i++) {
var press = pressList[i];
options += '<option value="' + press.id + '">' + press.name + '</option>';
}
$("#pressSelect").html(options);
},
error: function () {
alert("加载出版社信息失败!");
}
});
}
// 保存图书信息
function saveBook() {
$.ajax({
url: "/book/saveBook",
type: "POST",
data: $("#bookForm").serialize(),
success: function () {
alert("保存成功!");
},
error: function () {
alert("保存失败!");
}
});
}
</script>
</body>
</html>
```
在这个页面中,我们使用Thymeleaf的语法将后端传递过来的图书信息和出版社信息渲染到页面上,同时使用jQuery来处理表单的提交和加载出版社信息等操作。
其中,我们使用一个select元素来展示出版社信息,通过ajax请求获取到出版社信息后,根据已有的出版社信息生成下拉框选项,并将查询结果存储到Model中。
在表单提交时,我们使用jQuery的serialize方法将表单数据序列化为一个字符串,然后通过ajax请求将数据提交到后端的保存图书信息的接口中。
当保存成功或失败时,我们使用alert弹出提示框来提示用户。
阅读全文