jquery - 表单很多，但只提交有变化的那一份

Question

到目前为止我做了什么

我在 Perl 中使用 CGI::Application 和 HTML::Templates 创建了一个网站，看起来像 this .

底部表格将出现在我的数据库中的每个数据集。例如。 400次。

底部表单的想法是用户应该能够对现有数据集进行更改，顶部表单创建一个新数据集。

顶层表单有效，并使用 Ajax 在数据库中查找不允许用户输入的非法值。

问题

每个数据集都有一个“保存”按钮，如屏幕截图所示。

如何仅提交与使用 Ajax 按下的“保存”按钮相对应的数据集？

我可以使用纯 JQuery 并像这样隐藏输入来做到这一点

<form action="" method="post">
   <input name="anchor" value="34" type="hidden">
   <input name="title" type="text" />

   ...

   <button  type="submit">Save</button>
</form>

但是如果没有 Ajax，我无法首先检查数据库中的非法值。

Ajax 代码会是什么样子，它只会提交保存按钮所属表单的数据集？

Answer 1

您可以使用.serialize()方法:

$('form').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // the AJAX request succeeded => do something
            // with the results returned by the server
        }
    });
    return false;
});

这将订阅所有表单的提交事件(也许您可以调整选择器以将其仅限于表中包含的表单)，并且在提交时它将取消默认操作并通过序列化所有表单来发送 AJAX 请求表单字段。