时间戳

首页 > 解决方案 > 从弹出窗口调用 POST 方法

java - 从弹出窗口调用 POST 方法

问题描述

我有一个名为 IndexController 的控制器。它有一个@GetMapping 和@PostMapping 方法。当用户输入 URL 以转到 /index 时，它会加载书籍列表。在该索引页面上，有一个“添加新书”按钮，可触发模式弹出窗口。当用户在表单中输入信息并单击“添加”按钮时，它应该调用@PostMapping 方法。它没有调用该方法。表单的模型是 IndexBook。

索引控制器类：

@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";
    }  
}

索引书：

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">&times;</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>&#169; 2018 Book Note Book</p>
</footer>
</div>

</body>
</html>

标签： javahtmlspring-bootthymeleaf

解决方案

您需要更改按钮类型才能提交表单。

<div class="modal-footer">
    <button type="submit" class="btn btn-default" data-dismiss="modal">Add</button>
</div>

当你有一个 button 类型为 button 的元素时，它只能点击，但不会提交表单，除非你在js.

推荐阅读