javascript - 具有重复名称的名称-值对列表到 JavaScript 对象

Question

为了将表单数据从 AJAX 调用提交到服务器以绑定(bind) Telerik MVC 网格，我们可以在 OnDataBinding 中设置 e.data匿名 JavaScript 对象的事件

<script type="text/javascript">
function Grid_onDataBinding(e) {
     var categoryValue = "Beverages";
     var priceValue = 3.14;

     // pass additional values by setting the "data" field of the event argument
     e.data = { 
        // the key ("category") specifies the variable name of the action method which will contain the specified value
        category: categoryValue,
        price: priceValue
     };
}
</script>

为了促进 bool 值的模型绑定(bind)，ASP.NET MVC 生成复选框以及同名的隐藏文本字段

<input name="myCheckBox" class="check-box" id="myCheckBox" type="checkbox" CHECKED="checked" value="true"/>
<input name="myCheckBox" type="hidden" value="false"/>

当这些被提交时，提交的数据是

myCheckBox=true&MyCheckBox=false - 当复选框被选中时

myCheckBox=false - 当未选中复选框时

对于没有checkbox的页面，可以通过以下方式轻松获取post数据

e.data = form.serializeObject()

哪里serializeObject通过遍历所有表单字段来创建该对象。当存在如上所述的复选框时，如何在表单的情况下构造该对象？基本上，当名称允许重复时，名称-值对列表如何以对象形式表示？

e.data = { 
    textBox1: "some value1",
    myCheckBox: true //,
    //myCheckBox: false // ???
};

执行serializeObject为此类表单元素创建一个数组，并将这些元素作为 myCheckBox[]=true&myCheckBox[]=false 提交，这会破坏服务器端的模型绑定(bind)。

Answer 1

您可以选择特定的表单子(monad)元素进行序列化，而不是仅仅序列化整个表单。这允许你过滤掉你不想要的:

$('form input:not([type=hidden])').serializeObject();

编辑:根据@amit_g 的评论，您希望在选中时使用复选框，在未选中时使用隐藏元素。这需要比 :not 选择器更复杂的过滤器:

$('form input')
    .filter(function() {
        if ($(this).attr('type') == 'hidden') {
            // filter out those with checked checkboxes
            var name = $(this).attr('name');
            return !$('form input[type=checkbox][name=' + name +']')
                .prop('checked');
        } else {
            // include all other input
            return true;
        }
    })
    .serializeObject();

在这里查看工作中的 jsFiddle:http://jsfiddle.net/nrabinowitz/nzmg7/4/