jQuery序列化多个表单并作为JSON发送

jQuery serialize multiple forms and send as JSON

本文关键字：JSON 发送 表单 序列化 jQuery      更新时间：2023-09-26

>我在一个页面上有多个表单，每个表单都会将单个项目添加到数据库中。还有一个"全部添加"按钮，将发送所有产品数据。请参阅下面的基本 html：

<button type="submit">All all products</a>
<form>
<input type="hidden" name="Product" value="ProductA" />
<input type="checkbox" name="optionAll" value="Option All" /> Option All 
<input type="checkbox" name="option" value="Option 1" checked="checked" /> Option 1 
<input type="checkbox" name="option" value="Option 2" /> Option 2
<button type="submit">Add this product"</button> 
</form>
<form>
<input type="hidden" name="Product" value="ProductB" />
<input type="checkbox" name="optionAll" value="Option All" /> Option All 
<input type="checkbox" name="option" value="Option 1" checked="checked" /> Option 1 
<input type="checkbox" name="option" value="Option 2" checked="checked" /> Option 2 
<button type="submit">Add this product"</button> 
</form>

我正在尝试将序列化的表单数据发布为以下 JSON 格式：

products = {
    "ProductA": {
        "option": ["Option 1"] // only 1 checkbox is checked
    },
    "ProductB": {
        "optionAll": "Option All",
        "option": ["Option 1", "Option 2"] // both checkboxes are checked
    }   
}

我一直在尝试映射序列化数据，但无法将其转换为上述 JSON 格式。

data = $.map($('form').serializeArray(), function(el, i){
    var json = {};
    ???
    return json;
});
console.log(data)

感谢您的帮助！ 

var result = {};  // object to hold final result
$('button[type="submit"]').on('click', function() {
    $('form').each(function() {  // loop start for each form
      var sr = $(this).serializeArray(),
          options = [];
      result[sr[0].value] = {}; // insert Product value and initiate it as object
      $.each(sr, function() {  // loop start for each checkbox
        if(this.name == 'option') {
            options.push(this.value);
        }
      });
      // if all checkbox are checked then insert the property optionAll
      if(options.length == $('input[type="checkbox"][name="option"]',this).length) {
        result[sr[0].value].optionAll = 'Option All';  
      }
      result[sr[0].value].option = options;
   });
   console.log(result);
});

要将 javascript 对象序列化为 JSON 字符串，只需使用 

JSON.stringify(myobject)

所以你的工作主要是做对象：

 var products = {
 };
 products['ProductA'] = $('input[name="Products"]').find(':checked').val();

等等...

但是你真的应该改变一下你的html：你真的应该避免使用同名的输入。尝试至少给他们一个ID。

相关文章：