问题：

从弹出窗口调用POST方法

朱睿

2023-03-14

我有一个叫IndexController的控制器。它有@GetMapping和@PostMapping方法。当用户键入要转到/索引的URL时，它将加载一个书籍列表。在该索引页面上，有一个“添加新书”按钮，可触发模式弹出窗口。当用户在表单中输入信息并单击“添加”按钮时，它应该调用@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";
    }  
}

索引簿：

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

}

指数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>

共有1个答案

钱志

2023-03-14

为了提交表单，您需要更改按钮类型。

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

当您有一个类型为button的button元素时，它只能单击，但不会提交表单，除非您在js中指定了一个操作。

类似资料：

如何在JavaFX中从主窗口调用弹出窗口？

main.java--（src/sample文件夹） studentcontroller.java--（src/sample/controller文件夹） studentdao.java和sexdao.java（数据访问对象）--（src/sample/model文件夹） Student.java（公共类学生和构造器）--（src/sample/model文件夹） oddbc的util下的dbut
JavaScript弹出窗口方法汇总

本文向大家介绍JavaScript弹出窗口方法汇总，包括了JavaScript弹出窗口方法汇总的使用技巧和注意事项，需要的朋友参考一下本文实例汇总了常用的JavaScript弹出窗口方法，供大家对比参考，希望能对大家有所帮助。详细方法如下： 1.无提示刷新网页：大家有没有发现，有些网页，刷新的时候，会弹出一个提示窗口，点“确定”才会刷新。而有的页面不会提示，不弹出提示窗口，直接就刷新了. 如
Rselenium-弹出窗口

问题内容：我想使用Firefox浏览器，使用RSelenium从网站下载文件。我正确地完成了所有操作（导航，选择正确的元素并写下我想要的内容）；现在，我单击“下载”按钮，然后打开一个Firefox弹出窗口，并询问我是否要下载文件或“用…打开”。不幸的是，由于隐私限制，我无法编写示例。我的问题是：如何在需要时切换到弹出窗口/警报并单击“确定”？我尝试了以下方法，但均未成功：我也试过了但是
Popup弹出窗口

Popup 是一种可以包含任何Html内容的弹出窗口，从App的主内容区域上弹出。 Popup 和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。 Popup 布局 Popup 布局相当简单. 你所需要做的就是将放到 body 里正确的位置上： <div class="modal modal-no-buttons"> ... <div class="popup"> An
Python：PyQt弹出窗口

问题内容：因此，我一直在用Qt为我的Python应用程序创建GUI。我现在遇到的情况是，按下按钮后，将执行适当的推迟操作，我们执行一些任务，然后需要打开一个单独的窗口，其中包含一两个东西。但是我似乎无法弄清楚如何创建这个新的单独窗口。谁能给我一个如何创建一个例子吗？问题答案：一个使您抓狂的常见错误是忘记将创建的弹出窗口的句柄存储在将保持活动状态的python变量中（例如，存储在主窗口的数据成
AngularJS Fancybox弹出窗口

问题内容：我已经开始了angularjs项目，我想实现fancybox。为此，我在解决方案中包含了jQuery和fancybox插件。我试图在下面的fancybox窗口中显示的代码中打开模板。视图控制者还有 popup / add.html Fancybox成功打开了一个包含模板的窗口，但是该表达式尚未求值。谁能帮忙吗？问题答案：我已经为fancybox创建了指令

从弹出窗口调用POST方法

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档