Thymeleaf:点击表格行提交表单 [英] Thymeleaf: Form submit on click of table row
问题描述
我有一张包含订单和订单 ID 的表格.我想单击一行以在另一个页面中查看订单详细信息.我的代码:
I have a table with orders and order ids. I would like to click on a row to view the order details in another page. My code:
<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 表单提交:
I tried an ajax form submit:
<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>
在我的控制器中，我有这个:
In my controller I have this:
@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 有效，但页面没有被重定向到我的订单详情页面.
While the ajax works, the page is not getting redirected to my orderdetails page.
推荐答案
您不能使用 AJAX 重定向到页面.AJAX 用于从服务器获取数据，然后使用 JavaScript 处理/显示.但是，您基本上希望单击该行的行为类似于单击链接或(因为您使用的是 POST 映射)提交表单.
You can't use AJAX to redirect to a page. AJAX is for getting data from the server that is then processed/displayed using JavaScript. You however basically want clicking on the row to behave like clicking a link or (since you are using a POST mapping) submitting a form.
首先，使用 POST 会使这更复杂一些.您应该考虑使用 GET 映射，不仅因为它使这个问题更容易，而且因为 POST 映射在这里并不合适.POST 用于向服务器发送数据，而您并没有这样做.
First off, using POST makes this a bit more complicated. You should consider using a GET mapping, not only because it makes this problem easier, but also because a POST mapping isn't really appropriate here. POST is used to send data to the server, which you are not doing.
您应该考虑的另一件事是，使用(纯)JavaScript 解决方案来链接表格行会阻碍可访问性.例如，不能/不使用鼠标的用户(例如残疾人或搜索引擎)将无法看到或什至无法使用这样的链接.为了解决这个问题，最好为该行添加一个适当的链接.然后可以通过点击"链接来使用该链接.使用点击处理程序的 JavaScript 对其进行处理.
Another thing you should consider it that using a (pure) JavaScript solution to link the table row hinders accessibility. For example, users that can't/don't use a mouse (such as disabled people or search engines) won't be able to see or even use such a link. To solve this it is a good idea to add a proper link to the row. Then that link can used by "clicking" on it with the JavaScript of the click handler.
<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 无效.
IDs must be unique in HTML. By putting
id="orderRow"on such a repeated row will result in invalid HTML.
您不应该使用 on... 属性来分配事件处理程序.我只是在这里使用它，否则这个答案会走得太远.
You shouldn't be using on... attributes to assign event handlers. I'm just using it here or otherwise this answer will go too far.
从桌子周围移除 .它没有任何作用.
Remove the <form> from around the table. It doesn't do anything.
如果您确实想/必须使用 POST 映射，则将表格行中的链接替换为带有包含订单 ID 和提交按钮的隐藏字段的表单，并在 JavaScript 中查找该表单而不是链接并提交:row.querySelector("form").submit();.
If you do want to/have to use a POST mapping, then replace the link in the table row with a form with a hidden field containing the order ID and a submit button and in the JavaScript look for the form instead of the link and submit it: row.querySelector("form").submit();.
顺便说一句，有几种(可能更好)的方法来做你正在尝试的事情.例如:
BTW there are several (possibly better) ways to do what you are trying. For example:
忘记 JavaScript，只需在每个单元格中放置一个链接即可.使用正确的 CSS 可以更改行/单元格，使其看起来就像您在单击行一样.
Forget the JavaScript and just put a link into every cell. With the right CSS the row/cells can be changed so that it looks like you are clicking on the row.
您似乎正在使用 Bootstrap，它具有 "拉伸链接"功能.不幸的是，使用表格行有点棘手，但值得一看.
It seems like you are using Bootstrap, which has the "stretched link" feature. Unfortunately it's a bit tricky to get to work with table rows, but it's worth looking at.
这篇关于Thymeleaf:点击表格行提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
