一次提交多个表格

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 */
};

Answer 2

您不需要推入或单独的变量。 您可以像这样直接构建它：

photo_annotations[id] = {
  id: $(this).attr('id'),
  caption: $('#'+id+'_caption').val(),
  keywords: $('#'+id+'_keywords').val(),
  credit: $('#'+id+'_credit').val(),
  credit_url: $('#'+id+'_credit_url').val()
}