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

我有一个名为

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++;
}

因此，基本上，每个图像都通过变量

$i

链接到每个表单，该变量根据需要递增，直到到达

$images

数组的末尾。在我页面的右上角，我放置了一个提交按钮，如果没有错误，我想提交所有这些表单，如果有错误，只需在不提交的情况下将其回显即可

---

我将如何着手实现这一点

像这样的东西怎么样

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());
    });
});

---

像这样的东西怎么样

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());
    });
});

---

谢谢！你能总结一下你的答案和ThinkingStiff的答案之间的区别吗？哪一个更好？“怎么能用这个来回应错误呢？@ethagnawl，我还没试过。”。我必须先阅读更多关于AJAX的内容。。。但是如果我能让它工作，我会给你绿色的记号。。。谢谢谢谢你能总结一下你的答案和ThinkingStiff的答案之间的区别吗？哪一个更好？“怎么能用这个来回应错误呢？@ethagnawl，我还没试过。”。我必须先阅读更多关于AJAX的内容。。。但是如果我能让它工作，我会给你绿色的记号。。。谢谢