我有一个称为IndexController的控制器。它具有@GetMapping和@PostMapping方法。当用户键入URL转到/ index时，它将加载一本书籍列表。在该索引页面上，有一个“添加一本新书”按钮，会触发模式弹出窗口。当用户在表单中输入信息并单击“添加”按钮时，应调用@PostMapping方法。它不是在调用方法。表单的模型是IndexBook。
IndexController类：
@Controller
public class IndexController {
@GetMapping("/index")
public String formGet(Model model) {
BookService bookService = new BookService();
ArrayList<ReviewedBook> reviewedBooks = bookService.getRecordedBooks(1);
model.addAttribute("indexbook", new IndexBook());
model.addAttribute("books", reviewedBooks);
return "index";
}
@PostMapping("/index")
public String formPost(@ModelAttribute IndexBook ib, Model model) {
System.out.println("Post for index called.");
BookService bookService = new BookService();
return "index";
}
}
IndexBook：
public class IndexBook {
private int userId;
private String title;
private String author;
private String isbn;
private String genre;
private String dateRead;
private int rating;
public void setUserId(int userId) {
this.userId = userId;
}
public int getUserId() {
return userId;
}
public void setTitle(String title) {
this.title = title;
}
public String getTitle() {
return title;
}
public void setAuthor(String author) {
this.author = author;
}
public String getAuthor() {
return author;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
public String getIsbn() {
return isbn;
}
public void setGenre(String genre) {
this.genre = genre;
}
public String getGenre() {
return genre;
}
public void setDateRead(String dateRead) {
this.dateRead = dateRead;
}
public String getDateRead() {
return dateRead;
}
public void setRating(int rating) {
this.rating = rating;
}
public int getRating() {
return rating;
}
}
index.html（向下滚动到“模式内容”注释）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book Note Book</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">Book Note Book</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index">Books</a></li>
<li><a href="badges">Badges</a></li>
<li><a href="wishlist">Wishlist</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="profile">Profile</a></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span> Logout</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h2>Books</h2>
<p>This is all the books you've read</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>ISBN</th>
<th>Date read</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr th:if="${books.empty}">
<td colspan="2"> No Books Available </td>
</tr>
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.genre}"/></td>
<td><p th:text="${book.isbn}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><p th:text="${book.rating}"/></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addNewBook">Add new book</button>
<div class="modal fade" id="addNewBook" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add a new book</h4>
</div>
<div class="modal-body">
**<form action="#" class="form-horizontal" th:action="@{/index}" th:object="${indexbook}" method="post">
<input type="hidden" th:field="*{userId}" />
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title</label>
<div class="col-sm-10">
<input type="text" th:field="*{title}" class="form-control" id="title" placeholder="Enter title" name="title">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="author">Author</label>
<div class="col-sm-10">
<input type="text" th:field="*{author}" class="form-control" id="author" placeholder="Enter author" name="author">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="genre">Genre</label>
<div class="col-sm-10">
<input type="text" th:field="*{genre}" class="form-control" id="genre" placeholder="Enter genre" name="genre">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="isbn">ISBN</label>
<div class="col-sm-10">
<input type="text" th:field="*{isbn}" class="form-control" id="isbn" placeholder="Enter ISBN" name="isbn">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dateRead">Date read</label>
<div class="col-sm-10">
<input type="text" th:field="*{dateRead}" class="form-control" id="dateRead" placeholder="Enter date read" name="Enter the date read">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="rating">Rating</label>
<div class="col-sm-10">
<input type="text" th:field="*{rating}" class="form-control" id="rating" placeholder="Enter rating" name="Enter the rating">
</div>
</div>
</form>**
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer navbar-fixed-bottom">
<footer class="container-fluid text-center">
<p>© 2018 Book Note Book</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
您需要更改按钮类型，才能提交表单。
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
当按钮元素的类型为按钮时，除非您在js中指定了操作，否则该按钮元素只能单击，但不会提交表单。