使用Ajax仅提交多个表单中的一个(同名、不同ID)

Question

我有最近上传的文件列表，这些文件有可编辑的输入。列表中的每一项都封装在一个带有提交按钮的表单中。我希望编辑这些输入，并使用Ajax和序列化表单提交特定的表单(将更改保存到db)。

问题是，ajax的POST方法并不成功，我也不知道为什么。在最小化的HTML示例中，只有两个表单包含一个隐藏输入。在现实中，可以有更多的形式，其中每一个都有许多输入类型文本，选择，.

在JS中，单击提交按钮后得到id of <form>元素。然后对带有form的id进行子化，它应该序列化表单并将其发送到PHP。但是，在单击submit按钮后，控制台会报告“失败”，因为Ajax没有成功。当我注释行e.preventDefault();时，表单被发送到noramlly，而$id由于echo而被正确显示。

我无法独自解决这个问题，也无法在这里找到解决办法，所以我在这里寻求你的帮助。我相信这不是一个复杂的问题，我只是不知道我在做什么:)谢谢。

编辑：我已经更新了JS -摆脱了单击事件，编辑了成功函数，并在$.ajax中添加了error:。没有任何错误。它现在应该将$id记录在控制台中，但它只记录空行(所以没有)。

<form name="save-image" id="save-image-74" action="./inc/upload-proc.php" method="POST">
  <input type="hidden" name="save-image-id" value="74">
  <input type="submit" name="save-image" value="Save">'
</form>

<form name="save-image" id="save-image-75" action="./inc/upload-proc.php" method="POST">
  <input type="hidden" name="save-image-id" value="75">
  <input type="submit" name="save-image" value="Save">'
</form>

Javascript + jQuery：

// Send SAVE IMAGE form with Ajax
$("form[name*='save-image']").submit(function(e) {
  var form = $(this);
  var url = form.attr('action');
  e.preventDefault();
  console.log(form);
  $.ajax({
         type: "POST",
         url: url,
         data: form.serialize(), // serializes the form's elements.
         error: function(xhr, status, error) {
           var err = eval("(" + xhr.responseText + ")");
           alert(err.Message);
         },
         success:function(data){
           console.log(data);
        }
       });
  });

上载-pro.php：

if (isset($_POST['save-image'])) {
  $id = $_POST['save-image-id'];
  // There will be updates in database, not important.
  echo $id;
}

Answer 1

好吧，所以我找到了问题所在。我相信这对你来说是显而易见的，但对我来说是新的。我认为.serialize()发布表单名称本身就是为了上传-pro.php，但是它可能只发送其输入。因此，我应该使用隐藏输入的名称而不是if (isset($_POST['save-image'])) { ... }，因此正确的上载-pro.php是：

if (isset($_POST['save-image-id'])) {
  $id = $_POST['save-image-id'];
  // There will be updates in database, not important.
  echo $id;
}