Thymeleaf：点击表格行提交表单

Question

我有一张包含订单和订单 ID 的表格。我想单击一行以在另一个页面中查看订单详细信息。我的代码：

        <form id="orderDetalsForm" th:action="@{/restaurant/orderdetails}"
            method="POST" th:object="${order}">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th scope="col">Order Id</th>
                        <th scope="col">Order Details</th>
                        <th scope="col">Date</th>
                        <th scope="col">Amount</th>
                    </tr>
                </thead>
                <tbody>


                    <tr id="orderRow" th:each="order : ${orders}"
                        style="cursor: pointer" 
                        th:onclick="'getOrderItems(\''+${order.orderId}+ '\');'">
                        <td scope="row" th:text="${order.orderId}"></td>
                        <td th:text="${order.orderDetais}"></td>
                        <td th:text="${order.orderDate}"></td>
                        <td th:text="${order.amount}"></td>
                    </tr>

                    <tr>
                        <td colspan="3">Total</td>
                        <td th:text="${grandTotal}"></td>
                    </tr>
                </tbody>
            </table>
        </form>

我尝试了一个 ajax 表单提交：

    <script>
        function getOrderItems(orderId) {
            var url = "/restaurant/orderdetails";
            $.ajax({
                url : url,
                type : "post",
                data : {
                    "orderId" : orderId
                },
                success : function(data) {
                    console.log(data);
                },
                error : function() {
                    console.log("There was an error");
                }
            });
            
        }
    </script>

在我的控制器中，我有这个：

@PostMapping(value="/restaurant/orderdetails")
public ModelAndView orderDetails(@RequestParam String orderId){
    List<Product> orderDetails = userService.getOrderDetails(orderId);
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject("orderDetails", orderDetails);
   
    modelAndView.setViewName("restaurant/orderdetails");
    return modelAndView;
}

当 ajax 工作时，页面没有被重定向到我的 orderdetails 页面。

Answer 1

您不能使用 AJAX 重定向到页面。 AJAX 用于从服务器获取数据，然后使用 JavaScript 处理/显示。但是，您基本上希望单击该行的行为类似于单击链接或（因为您使用的是 POST 映射）提交表单。

首先，使用 POST 会使这变得更复杂一些。您应该考虑使用 GET 映射，不仅因为它使这个问题变得更容易，而且因为 POST 映射在这里并不合适。 POST 用于将数据发送到服务器，您没有这样做。

您应该考虑的另一件事是，使用（纯）JavaScript 解决方案来链接表格行会阻碍可访问性。例如，不能/不使用鼠标的用户（例如残疾人或搜索引擎）将无法看到甚至使用这样的链接。要解决此问题，最好在行中添加适当的链接。然后可以通过单击处理程序的 JavaScript “单击”该链接来使用该链接。

<tr th:each="order : ${orders}" onclick="orderRowClick(this)">
   <td scope="row"><a th:href="@{/restaurant/orderdetails(orderId=${order.orderId})}" th:text="${order.orderId}"></a></td>
   <td th:text="${order.orderDetais}"></td>
   <td th:text="${order.orderDate}"></td>
   <td th:text="${order.amount}"></td>
</tr>

<script>
  // Look for a link in the row and click on it
  function orderRowClick(row) {
     row.querySelector("a").click();
  }
</script>

还有几点：

• ID 在 HTML 中必须是唯一的。将id="orderRow" 放在这样重复的行上会导致 HTML 无效。

• 您不应该使用on... 属性来分配事件处理程序。我只是在这里使用它，否则这个答案会走得太远。

• 从桌子周围删除<form>。它什么也没做。

如果您确实想要/必须使用 POST 映射，则将表格行中的链接替换为具有包含订单 ID 和提交按钮的隐藏字段的表单，并在 JavaScript 中查找表单而不是链接并提交：row.querySelector("form").submit();.

顺便说一句，有几种（可能更好）的方法来做你正在尝试的事情。例如：

• 忘记 JavaScript，只需在每个单元格中添加一个链接。使用正确的 CSS 可以更改行/单元格，使其看起来像是在单击行。

• 您似乎正在使用具有 "stretched link" feature 的 Bootstrap。不幸的是，处理表格行有点棘手，但值得一看。

Answer 2

到目前为止，我所了解的是，当用户单击表格上的按钮时，您希望将用户重定向到新页面，因为有不同的方法 -

1. 您的方法存在问题 -
   由于您使用的是 ajax，它不会将用户重定向到新页面（因为这正是 AJAX 的工作方式，有关 AJAX 的更多信息，请访问此链接 - https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX），除非您明确告诉您的 ajax 代码重定向用户在新页面上。
   为此，您可以简单地将您的页面重定向代码放在您的 ajax 成功上，如下所示 -
   

<script>
    //your code
        $.ajax({
              // your code
            success : function(data) {
                //page redirection code here
                window.location.href = "your-base-URL/restaurant/orderdetails/orderId="+orderId;

            },
            error : function() {
                console.log("There was an error");
            }
        });
     }
</script>

PS - 这不是有效的编程实践，因为从技术上讲，您不必要地对服务器进行额外调用。

1. 接近第二个
   只需将您的 html 表格设置为 a-href 链接，就像这样 -

<html>
  // your code
<a th:href="@{'/restaurant/orderdetails/orderId=' + ${order.orderId}}">Order details button </a>

//your rest of the code
</html>

1. Approach-3rd，您也可以使用 java-script 函数进行页面重定向，只需修改您的 ajax 函数，类似这样 -
   

函数 getOrderItems(orderId) {

    //page redirection code here
  window.location.href = "your-base-URL/restaurant/orderdetails/orderId="+orderId;

}