javascript - 通过 AJAX 使用单个提交按钮提交多个 HTML 表单

Question

我有一个名为 publish.php 的页面，它允许用户输入他们刚刚在上一页上传的每个图像的详细信息(名称、描述、位置等)，其中每个图像都有自己的形式来输入此信息。并非所有表单都会立即显示，而是所有图像都以缩略图形式显示在页面顶部，单击图像会隐藏前一个图像的表单并显示当前图像的表单，因此它类似于选项卡式布局。

我想要做的是通过一个提交按钮提交所有这些表单，该按钮与每个表单隔离，并位于 publish.php 页面的单独区域 - 如果有任何错误，我我也想回应他们。我的简短研究表明，仅靠 HTML 是不可能做到这一点的，需要 AJAX。

下面是显示每个图像和表单的 PHP 代码的精炼版本:

// Display each image
$i = 0;
foreach ($images as $image) {
   echo '<img src="imageSrc'.$i.'" />';
   $i++;
}

// Further down the page... display each form...
$i = 0;
foreach ($images as $image) {
    include 'publishform.php';
    $i++;
}

publishform.php 看起来有点像这样:

<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>

基本上，每个图像都通过变量 $i 链接到每个表单，该变量根据需要递增，直到到达 $images 数组的末尾。在页面的右上角，我放置了一个提交按钮，如果没有错误，我想提交所有这些表单，如果有错误，只需回显它们而不提交。

我将如何实现这一目标？

Answer 1

像这样的事情怎么样？

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

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

http://jsfiddle.net/MxHQe/