我应该在页面上使用一个表单还是为每个项目生成一个表单？答案

【问题标题】：Should I use one form on page or generate a form per item?我应该在页面上使用一个表单还是为每个项目生成一个表单？
【发布时间】：2011-09-29 15:27:58
【问题描述】：

我想显示一个项目列表。每个项目旁边都有一个编辑和删除图标。

出于显而易见的原因，我想使用 HTTP POST 触发删除操作。
使用 jQuery，我将绑定链接以触发 form.submit。

但是我不确定是应该在每个项目旁边生成一个表单还是只使用一个表单。
以下是我所看到的两种方法的优缺点。

每个项目的表单：

易于生成；
无需在 JS 中设置动作和输入值。

单一表格：

在语义上更有意义；
需要客户端JS设置隐藏输入；
需要客户端 JS 设置表单操作（例如id + '/delete/）。

有什么要补充的？现代 HTML 应用程序的首选模式是什么？

【问题讨论】：

标签： html forms http post design-patterns

【解决方案1】：

我过去使用过复选框。这对可用性来说更好，每个选中的复选框都可以将自己的 ID 传递给表单处理脚本。

【讨论】：

【解决方案2】：

我看到使用包含所有列表元素的单个表单的主要缺点是，如果列表很长，您最终可能会收到一个巨大的 POST。作为一个优势，您可以将多个元素标记为删除（例如复选框）并执行单个删除请求。

我会选择任何一个

每个列表元素都有一个表单。这将使删除多个元素成为不可能，但会使 POST 大小保持最小。
使用单个表单，但不包括所有列表元素。例如，有一个只包含一个隐藏元素的删除表单，您可以将所有标记为通过 JS 操作删除的 id 放入其中。

附带说明，您还可以跳过表单并通过 ajax 执行所需的交互。这将显着改善用户体验。考虑到在需要时仍需要表单来提供回退机制。

【讨论】：

【解决方案3】：

最后，我决定通过jQuery.ajax 使用 AJAX。

原因是语义上我什至没有表单——我有按钮。
因此，jQuery 是一种更简单的解决方案，因为它允许将发布逻辑保留在一个地方（而不是将其分散在 HTML 和 JS 中）。

我为每个语义行分配了row 类，并将对应的数据库ID 放在HTML5 data attribute 中，称为data-row-id。

<div class="row" data-item-id="{{ product.id }}">
    <!-- ... --->

    <a href="#" class="delete-btn"><img src="/img/delete.png" alt="Delete"></a>
</div>

那我有一些单独的台词

$('.delete-btn').click(function() {
    var row = $(this).closest('.row');
    var id = row.data('item-id');

    $.ajax({
        url: id + '/delete/',
        type: 'POST'
    });

    row.fadeOut().slideUp();
    return false;
}

在我的 $() 负载处理程序中。

此解决方案可在整个代码库中完美扩展，因为您只需设置 row 类和 data-item-id 属性，按钮将“正常工作”。

【讨论】：