php - 使用AJAX .on(click)方法提交多个HTML表单+其他变量数据

Question

我想这确实是我最后一个题为“Submit multiple HTML forms with a single submit button via AJAX”的问题的延续，它让我开始使用一些非常基本的 AJAX。您确实必须阅读该问题才能彻底理解这个问题。现在这个问题的关键是其他变量数据...

所以，我有一个使用 jQuery 运行的基本 AJAX 提交脚本，它与我上一个问题的答案重复(减去从“button”到“input#publishimages”的更改)，并且它可以很好地迭代多个表格并全部提交:

function post_form_data(data) {
    $.ajax({
        type: 'POST',
        url: 'verify.php',
        data: data,
        success: function () {},
        error: function () {}
    });
}

$('input#publishimages').on('click', function () {
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});

正在提交的表单(每个表单等于一个图像，因此根据需要迭代多次以提交每个图像 - 查看更多是我之前的问题)也在上一个问题中，并且看起来 与此类似:

<form id="image<?php echo $i; ?>">
   <label>Name</label>
   <input name="image[<?php echo $i; ?>][Name]" />

   <label>Location</label>
   <input name="image[<?php echo $i; ?>][Location]" />

   <!-- etc, etc, for description, coordinates, camera etc -->

</form>

现在回想起来，遗憾的是这有点太淡化了；这就是其他变量数据位发挥作用的地方。我现在正在检查每个图像的 EXIF 数据以获取附加信息，并从表单中删除输入如果我找到了原本必须由用户在表单上填写的数据，如果没有，显示输入内容，以便用户可以自己填写。因此，带有表单的 PHP 脚本看起来更像这样(伪代码):

<form id="image<?php echo $i; ?>">
   <label>Name</label>
   <input name="image[<?php echo $i; ?>][Name]" />

   // Examine EXIF Data

   if (I find EXIF Location Data) {

       $_POST['image'][$i]['location'] = $location;

   } else {

       <label>Location</label>
       <input name="image[<?php echo $i; ?>][Location]" />

   }

  // etc, etc, similar situation occurs with camera make + model, date taken etc.

</form>

因此，您可以看到我正在做的是，如果我找到/没有找到信息，则有选择地动态删除和添加输入到表单中。如果我找到它，请将信息提交到 $_POST super 全局，否则只需在表单中回显输入以供用户填写。有什么问题？ JavaScript。

这是一个问题，因为...

现在，当我引用 $(this) (当然是指 $('form'))时，只有一些变量(取决于我有多少 EXIF 数据)设法提取)通过 AJAX 发送到目的地，因为它们不再是表单的一部分并且输入不存在 - 相反，我已将它们分配给 $_POST 超全局，并且它们我的 jquery 脚本无法访问。

所以...

我需要一种能够通过 AJAX 将与图像相关的所有内容提交到我的目的地的方法，无论它是发布还是作为表单的一部分提交。我完全不知道如何实现这一目标......有什么建议吗？

Answer 1

您正在“双重提交”。在 AJAX 函数内拦截点击并阻止默认行为:

$('input#publishimages').on('click', function (e) {
    e.preventDefault();
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});

这将阻止表单提交。无论如何，提交的表单只不过是 POST 或 GET 请求。

除此之外，我对你想要实现的目标感到困惑。听起来由于验证步骤，数据不完整？用户提交表单，抓取一些 EXIF 数据，并返回新的输入和丢失的数据，但随后 EXIF 数据已经溶解在一堆零和一中，对吗？如果是这种情况，您可以使用隐藏的表单字段:

if (I find EXIF Location Data) {

    $_POST['image'][$i]['location'] = $location;
    echo '<input type="hidden" value="$foo" name="$bar" />;

} else {

    <label>Location</label>
    <input name="image[<?php echo $i; ?>][Location]" />

}