Javascript 一次提交多个表单

在我的照片公文包管理页面中，我构建了一个工具，用于为每张照片添加标题、关键字和信用。到目前为止，我已经动态列出了多个表单，每个表单都包含一个提交按钮。页面上有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>

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

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，格式如我上面所示。我希望有人能告诉我如何实现这种格式。

您不需要推送或分离变量。您可以像这样直接构建它：

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

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

---

您不需要推送或分离变量。您可以像这样直接构建它：

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

---

你为什么不把它全部打包成一个表单标签呢？或者您可以传递

$（'form'）。serialize（）

@Rob:因为我想保留“单独提交”和“全部提交”功能。您可以在一个表单中有多个提交按钮，每个按钮都有不同的名称，只需检查服务器端单击了哪个提交按钮。为什么不将其全部包装在一个表单标记中？或者你可以传递

$（'form'）。serialize（）

@Rob:因为我想保留“单独提交”和“全部提交”功能。你可以在一个表单中有多个提交按钮，每个按钮都有不同的名称，只需检查服务器端单击了哪个提交按钮。完美，也很简单。我真的必须更经常地玩东西，问一些简单的问题也不会显得那么傻。我必须将顶部ID字段移到对象之外，因为photo_annotations[ID]需要ID值。顺便说一下，欢迎来到StackOverflow。对，错过了那个。因为您需要id来为索引设置键以及获取其余的值。非常好，也非常简单。我真的必须更经常地玩东西，问一些简单的问题也不会显得那么傻。我必须将顶部ID字段移到对象之外，因为photo_annotations[ID]需要ID值。顺便说一下，欢迎来到StackOverflow。对，错过了那个。因为您需要id来为索引设置键以及获取其余的值。