Question

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

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

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

这就是我现在所处的位置。我努力将表单字段变成一个可读和可用的对象供我的PHP阅读。

MY FORM STRUCTURE

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

MY JQUERY SO FAR

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

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

2 个答案: