如何在使用javascript提交表單之前構建JSON

我在jsFiddle上有以下demo。我想用javascript提交這個表單，然後發送一個JSON對象給我的控制器。如何在使用javascript提交表單之前構建JSON

正如您所看到的，可以將多行添加到表中並提交。在我的JSON數據中，我想跟蹤哪些複選框被點擊了哪些行。因此，例如，基於下面的屏幕截圖：

enter image description here

我想JSON對象看起來像這樣：

{light:[{red:on}, {yellow:off},{green:on}], dark:[{red:off}, {yellow:off},{green:on}]}...

來源

2013-02-19 Anthony

如果您要接受我的建議，請使用malsup的[form plugin]（http://jquery.malsup.com/form/#getting-started） – 2013-02-19 15:36:34

我快速瀏覽了一下。但它不會把結果放在我想要的格式中...... – Anthony 2013-02-19 15:42:59

我想出了看起來像這樣的代碼：

var jsonObject = {}; 
$('.input-row').each(function(index, row) { 
    var innerObject = {}; 
    $(':checkbox', row).each(function(index, checkbox) { 
     innerObject[checkbox.name] = checkbox.checked ? 'on' : 'off'; 
    }); 
    var key = $('input[type="text"]', row).val(); 
    jsonObject[key] = innerObject; 
}); 
console.log(jsonObject); 
// use jsonObject somehow

我們正在創建一個空對象，它將成爲我們的整體JSON對象（稱爲jsonObject）。

然後我們遍歷每個輸入行（我已經添加了一個input-row類，因此可以輕鬆地選擇它們）。

對於每一行，我們創建另一個空對象（稱爲innerObject），然後迭代其複選框。對於每個複選框，我們將一個屬性添加到innerObject：關鍵是複選框的name屬性/屬性，值爲on或off，具體取決於checked狀態。最後，我們得到該行text輸入的值作爲jsonObject中的密鑰，並將該屬性添加到該行中。

這是上述代碼的working example。

來源

2013-02-19 15:29:21

謝謝。 jsFiddle目前似乎正在下降。我會盡快嘗試。代碼看起來很好，但 – Anthony 2013-02-19 15:46:38

最簡單的方法序列化形式，JSON是使用jQuery's serializeArray()

JSON.stringify($('form').serializeArray());

來源

2013-02-19 15:17:10 DON

儘管如此，這並不會給他任何靠近他所期望的對象結構的地方。使用它可能更容易，並且修改服務器端代碼，或者編寫jQuery函數以提供他想要的格式來提供JSON可能更容易。 – 2013-02-19 15:18:22

嗯我得到這種類型的json：'{{「名稱」：「紅色」，「值」：「on」}，{「名稱」：「綠色」，「值」：「on」}，{ 「name」：「green」，「value」：「on」}]'這裏是小提琴的更新鏈接：http://jsfiddle.net/fmuW6/4/ – Anthony 2013-02-19 15:26:28

您應該構建自己的JSON字符串，然後使用jQuery.parseJSON()來完成表中所有tr元素的循環，並收集所需的信息。

下面的代碼是根據html中的小提琴手開始的。

var strJSON = ''; 

$("#blacklistgrid tr").each(function (i) { 
    if (i != 0) 
    { 
     var currentRow = $(this) 
     strJSON += "{ " + currentRow.find("input[name='shade']").val() +"[{red: currentRow.find("input[name='red']").is(":checked")} ] }"; 
    } 
}); 

var theJSON = jQuery.parseJSON(strJSON);

請檢查JSON字符串格式正確，如果它的工作我不能檢查代碼，但你可以在這裏的邏輯。

來源

2013-02-19 15:34:25

安東尼的解決方案是更好，更正確的解決方案。爲什麼我認爲從字符串解析我不知道。 – 2013-02-19 15:36:49

如何在使用javascript提交表單之前構建JSON

回答

相關問題