通过 AJAX 使用单个提交按钮提交多个 HTML 表单答案

【问题标题】：Submit multiple HTML forms with a single submit button via AJAX通过 AJAX 使用单个提交按钮提交多个 HTML 表单
【发布时间】：2013-03-02 21:39:19
【问题描述】：

我有一个名为 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 数组的末尾。在页面的右上角，我放置了一个提交按钮，如果没有错误，我想提交所有这些表单，如果有，只需将它们回显而不提交。

我将如何实现这一目标？

【问题讨论】：

标签： javascript html ajax forms post

【解决方案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/

【讨论】：

谢谢！您能否总结一下您的答案与 ThinkingStiff 的答案之间的区别？哪一个更好？如何通过这个来回显错误？
@ethagnawl，我还没试过。我必须先阅读更多关于 AJAX 的内容......但如果我能让它工作，我会给你一个绿色的勾......谢谢！