Question

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

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

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

每件商品的表格：

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

单一表格：

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

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

Answer 1

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

我会选择

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

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

Answer 2

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

Answer 3

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

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

我为每个语义行分配了row类，并在HTML5 data attribute中为每一行添加了{{3}}的相应数据库ID。

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属性，按钮将“正常工作”。

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

3 个答案: