jQuery的序列化多種形式和發送的JSON

我有一個頁面，每個表單將單個項目添加到數據庫中的多種形式。還有一個'全部添加'按鈕，將發送所有產品數據。見下面基本的HTML：jQuery的序列化多種形式和發送的JSON

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

我一直在映射序列化擺弄數據，但couldn」不要把它變成像上面那樣的JSON格式。

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

感謝您的幫助！

來源

2012-05-03 mattb

我能想到的做它的「簡單」 jQuery的方式。 – gdoron

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

來源

2012-05-03 17:15:03 thecodeparadox

感謝您的幫助！我發現一對夫婦的事情：OptionAll總是傳遞儘管它已經不是檢查，選項1和/或1選項沒有被傳遞eventhough他們檢查。你也看到了嗎？ – mattb

我想通了。再次感謝！ – mattb

嗨codeparadox，我會如何修改代碼，如果我需要扁平化JSON像這樣：產品= { 「SKU」：「產品A」，「選項」：「選項1」] //只有1複選框被選中 }，「SKU」：「產品B」，「optionAll」：「選項全部」，「選項」：[ 「選項1」，「選項2」] //兩個複選框被選中 } } – mattb

要序列化爲JSON字符串javascript對象，只需使用

JSON.stringify(myobject)

所以，你的工作主要是使物體：

var products = { 
}; 

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

等等...

但是你真的應該改變一下你的html：你應該避免使用同名的輸入。儘量至少給他們一個ID。

來源

2012-05-03 16:49:26

不會以他想要的格式給他輸出。 – gdoron

jQuery的序列化多種形式和發送的JSON

回答

相關問題