如何在使用javascript提交表单之前构造JSON

Question

我在jsFiddle上有以下demo。我想使用javascript提交此表单并将JSON对象发送回我的控制器。

正如您所看到的，可以将多行添加到表中并提交。在我的JSON数据中，我想跟踪哪些行被单击的复选框。例如，基于以下屏幕截图：

我希望JSON对象看起来像这样：

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

Answer 1

我想出的代码如下：

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，具体取决于{{ 1}}状态。最后，我们获取该行上checked输入的值，以用作text中的键，并将属性添加到其中。

以上是上述代码的working example。

Answer 2

将表单序列化为JSON的最简单方法是使用jQuery's serializeArray()

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

Answer 3

您应该构建自己的JSON字符串，然后使用jQuery.parseJSON()来循环表中的所有tr元素并收集所需的信息。

以下代码根据fiddler中的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字符串的正确格式，如果有效，我无法检查代码，但您可以在此处获取逻辑。