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超全局，否则只需在表单中回显输入以供用户填写。有什么问题？ Javascript。

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

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

所以...

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

Answer 1

你可以保留一切的输入。对于那些在EXIF中有现有数据的用户，只需将其填入并使用CSS隐藏用户的输入。这样，您就可以以更通用的方式处理表单，并且您的问题就消失了。

Answer 2

你是'双重提交'。在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]" />

}

使用AJAX .on（click）方法提交多个HTML表单+其他可变数据

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

所以...

2 个答案: