Thymeleaf：点击表格行提交表单

Posted 2023-02-26

【中文标题】Thymeleaf：点击表格行提交表单

【英文标题】：Thymeleaf: Form submit on click of table row

【发布时间】：2021-01-28 11:06:57

【问题描述】：

我有一张包含订单和订单 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 页面。

【参考方案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。不幸的是，处理表格行有点棘手，但值得一看。

【参考方案2】：

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

您的方法存在问题 - 由于您使用的是 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 - 这不是有效的编程实践，因为从技术上讲，您不必要地对服务器进行额外调用。

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

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

//your rest of the code
</html>

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

函数 getOrderItems(orderId)

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