Question

我在服务器端使用自定义框架的java / jsp应用程序。此特定页面是视图购物车，其中包含购物车中的项目列表。在列表中，我有一个表单，用于更新数量或删除项目的每个项目。我正在使用多个表单，所以如果我以一个表单提交整个列表，我不需要在服务器端做太多工作来确定需要更新哪个项目。我给每个表单提供了产品的唯一ID，我还在触发提交的操作链接上的属性中添加了相同的id。在单击操作链接上我需要设置隐藏字段pageAction，因此在服务器端，这对应于运行任何特定页面操作的代码的actionEvent。因此，如果命中了cartUpdate，则需要将其设置为pageAction。下面的代码有效，但我不确定这是否有任何不良做法，因为我主要坚持服务器端代码;）我主要质疑js代码中的行：

 js("input[rel=actionButton]").val(action);

我不确定我是否还需要通过ID进行正确的检查？或者如果在JS方面有更好的方法可以做到这一点，那么我正在做什么。任何建议将不胜感激。

HTML

<!-- QUANTITY AND MANAGEMENT -->
<td class="cartQty" align="left" valign="top">
    <form id="${item.product.boId}" action="${pageContext.request.contextPath}/store/viewcart.do" method="post">
        <input name="quantity" type="text" value="1" maxlength="3" class="cartQtyBox">  
        <input type="hidden" value="${item.product.boId}" name="productId">
        <input type="hidden" value="${item.productStyle.boId}" name="productStyleId">
        <input type="hidden" name="pageAction" rel="actionButton">
        <a id="buttonAction" rel="buttonAction" action="cartUpdate" pid="${item.product.boId}" href="#" class="updateCart">Update</a>
        <span>|</span>
        <a id="buttonAction" rel="buttonAction" action="cartRemove" pid="${item.product.boId}" href="#" class="removeItem">Remove</a>
    </form>
</td>

JS

js(document).ready(function() {
    js("a[rel=buttonAction]").click(function(event){
        var formId = js(this).attr('pid');
        var action = js(this).attr('action');
        js("input[rel=actionButton]").val(action);
        js("#"+formId).submit();
    });
});

Answer 1

我不熟悉JSP，但你可以做一些改变，我认为这是一个很好的做法。首先，您不应在没有data-前缀的元素中使用任何自定义属性，这是HTML5规范中的推荐方式，因此您使用的位置，例如

<a id="buttonAction" rel="buttonAction" action="cartUpdate" pid="${item.product.boId}" href="#" class="updateCart">Update</a>
<a id="buttonAction" rel="buttonAction" action="cartRemove" pid="${item.product.boId}" href="#" class="removeItem">Remove</a>

在这种情况下，您应该使用

<a data-action="cartUpdate" data-pid="${item.product.boId}" href="#" class="updateCart buttonAction">Update</a>
<a data-action="cartRemove" data-pid="${item.product.boId}" href="#" class="removeItem buttonAction">Remove</a>

现在，请注意我已从两个输入中删除id和rel，并使用action前缀修改了pid和data-，并添加了两个元素中的新类buttonAction。首先，id应该是唯一的，这意味着两个元素不能具有相同的id，在您的情况下，您不使用这些id，因此它们是不必要的。你也有

<input type="hidden" name="pageAction" rel="actionButton" />

您可以使用

<input type="hidden" name="pageAction" />

您正在使用

js("a[rel=buttonAction]").click(function(event){ // ... });

在这种情况下，您应该使用

js(".buttonAction").click(function(event){ // ... });

此处，.buttonAction是两个a元素的类名，您可以使用相同的类名对多个元素进行分组。用于类名的点（.）。在您的点击处理程序中，您有

var formId = js(this).attr('pid');
var action = js(this).attr('action');
js("input[rel=actionButton]").val(action);
js("#"+formId).submit();

在这种情况下，您只需要

event.preventDefault();
var action = js(this).attr('data-action');
js(this).closest('form').find('input[name="pageAction"]').val(action);
js(this).closest('form').submit();

所以完整的代码应该是

js(document).ready(function() {
    js(".buttonAction").click(function(event){
        event.preventDefault();
        var action = js(this).attr('data-action');
        js(this).closest('form').find('input[name="pageAction"]').val(action);
        js(this).closest('form').submit();
    });
});

希望我没有错过任何东西。

JQuery - 提交包含多个表单的页面

1 个答案: