javascript - 通过一次提交提交多个表单

Question

在我的照片组合管理页面中，我构建了一个工具来为每张照片添加标题、关键字和出处。到目前为止，我已经动态列出了多个表单，每个表单都包含一个提交按钮。页面上有 20 多张照片/表单，这可能是一项无聊的工作，我们希望在此基础上通过在页面底部添加一个按钮来提交所有内容。

我继续构建了我认为很好的方法，并逐一循环遍历所有表单，并使用 AJAX 将数据发布到 PHP 页面。这工作得很好，但就像我提到的，有 20 多张照片，它运行 20 个 AJAX 请求和 20 个 SQL 更新，现在感觉这是一个糟糕的工作。

我现在正在研究其他方法，包括循环遍历每个表单、创建数组或对象、在一个请求中发送它，并使用一个漂亮的 SQL 查询来一次更新所有行。

这就是我现在所处的位置。我正在努力将表单字段转换为可读且可用的对象以供我的 PHP 读取。

我的表单结构

<form name="12344">
    <div class="input_wrap">
        <textarea id="12344_caption"></textarea>
    </div>
    <div class="input_wrap">
        <input type="text" id="12344_keywords" />
    </div>
    <div class="input_wrap">
        <input type="text" id="12344_credit" />
    </div>
    <div class="input_wrap">
        <input type="text" id="12344_credit_url" />
    </div>
</form>

<form name="12345">
    <div class="input_wrap">
        <textarea id="12345_caption"></textarea>
    </div>
    <div class="input_wrap">
        <input type="text" id="12345_keywords" />
    </div>
    <div class="input_wrap">
        <input type="text" id="12345_credit" />
    </div>
    <div class="input_wrap">
        <input type="text" id="12345_credit_url" />
    </div>
</form>

到目前为止我的 JQUERY

var photo_annotations = {};

$('form').each(function(i) {
    var id = $(this).attr('id');
    var caption = $('#'+id+'_caption').val();
    var keywords = $('#'+id+'_keywords').val();
    var credit = $('#'+id+'_credit').val();
    var credit_url = $('#'+id+'_credit_url').val();

    // create object to post
    photo_annotations[id].push({});
    (help)

}

$.ajax({
    type: 'POST',
    url: 'ajax/save-annotations.php',
    data: { json: JSON.stringify(photo_annotations) }
});

这是我想要构建的数据类型:

photo_annotations = {
    "12344": {
        "caption": "This is a caption for the photo ID 12344.",
        "keywords": "Keyword1, Keyword2, Keyword3",
        "credit": "John Doe",
        "credit_url": "http://www.johndoe.com"
    },
    "12345": {
        "caption": "This is a caption for the photo ID 12345.",
        "keywords": "Keyword4, Keyword5, Keyword6",
        "credit": "Joe Bloggs",
        "credit_url": "http://www.joebloggs.com"
    }   
}

我正在努力将我的表单字段按照我上面向您展示的格式正确地转换为 JSON。我希望有人能告诉我如何实现这种格式。

Answer 1

photo_annotations[id] = {
    caption: caption
    /* and so on */
};