如何在使用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

回答

相关问题