jquery用数组序列化输入

Question

我在我的网站上有一个表格,如下所示:

<form id="myform" action="" method="">
 <input type="text" name="name[1][first]">
 <input type="text" name="name[2][first]">
 <input type="text" name="name[3][first]">
</form>

我想简单地获取所有数据并将其发送到Web服务,所以有这个js:

$fields = $('#myform').serializeArray();

问题是,它创建了json,输入名称中显示了所有括号,因此我得到一个解析错误.

我如何使用serializeArray并获得正确的json？

我希望看到的结果格式是这样的:

{
  "name": {
    "1": {
      "first": "val1"
    },
    "2": {
      "first": "val2"
    },
    "3": {
      "first": "val3"
    }
  }
}

谢谢!

Answer 1

我做了一个递归函数/插件来完成这个:

$.fn.serializeControls = function() {
  var data = {};

  function buildInputObject(arr, val) {
    if (arr.length < 1)
      return val;  
    var objkey = arr[0];
    if (objkey.slice(-1) == "]") {
      objkey = objkey.slice(0,-1);
    }  
    var result = {};
    if (arr.length == 1){
      result[objkey] = val;
    } else {
      arr.shift();
      var nestedVal = buildInputObject(arr,val);
      result[objkey] = nestedVal;
    }
    return result;
  }

  $.each(this.serializeArray(), function() {
    var val = this.value;
    var c = this.name.split("[");
    var a = buildInputObject(c, val);
    $.extend(true, data, a);
  });
  
  return data;
}

$("#output").html(JSON.stringify($('#myform').serializeControls(), null, 2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="myform" action="" method="">
 <input type="text" name="name[1][first]" value="beep">
 <input type="text" name="name[1][second]" value="bloop">
 <input type="text" name="name[2][first]" value="derp">
  
 <input type="text" name="foo" value="bar">  
</form>

<pre id="output">
</pre>

除了整个选择器之外,您还可以在其他选择器上调用它form.例如,调用:

$('input[name^="name\\["]').serializeControls()

将返回仅包含name字段的对象.有关更多示例,请参见http://codepen.io/alexweissman/pen/MyWZdN.

请注意(暂时),这对于带有空括号的字段名称不起作用(例如,input name="potatoes[]"由于无法提取唯一键,因此将忽略字段).

Answer 2

鉴于您已成功将数组序列化为$fields，您现在可以遍历它并将其转换为更容易理解的结果对象：

var result = {};
for(var i in $fields) {
   var parts = $fields[i].name.split("[");
   var resultIndex = parseInt(parts[1].replace(']', ''), 10);
   result[resultIndex] = $fields[i].value; 
}

虽然$fields是全局变量的有效名称，但我不能对此事保持沉默：在 JavaScript 中，局部变量是用var关键字定义的，并且它们前面没有美元符号 - 美元符号通常指的是 jQuery 对象。因此，您可以通过调用来获取字段：

var fields = $('#myform').serializeArray();