jquery使用数组序列化输入 [英] jquery serialize input with arrays

问题描述

我的网站上有这样一个表单：

 < form id =myformaction =method =  > 
< input type =textname =name [1] [first]> 
< input type =textname =name [2] [first]> 
< input type =textname =name [3] [first]> 
< / form> 
  

我想简单地获取所有数据并将其发送到web服务，以便使用此js：

  $ fields = $（'＃myform'）。serializeArray（）; 
  

问题是，它会创建输入名称中显示的所有括号的json，所以我得到一个解析错误。

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

我想要的结果格式看到是这样的：

  {
name：{
1：{
first：val1
}，
2：{
first：val2
}，
3： {
first：val3
} 
} 
} 
  

$ $ b $ p

解决方案

我做了一个递归函数/插件来做到这一点：

$。fn.serializeControls = function（）{var data = {};函数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）;结果[objkey] = nestedVal; }返回结果; } $ .each（this.serializeArray（），function（）{var val = this.value; var c = this.name.split（[）; var a = buildInputObject（c，val）; $ .extend true，data，a）;}）; （JSON.stringify（$（'＃myform'）。serializeControls（），null，2））;

< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/ jquery.min.js>< / script>< form id =myformaction =method => < input type =textname =name [1] [first]value =beep> < input type =textname =name [1] [second]value =bloop> < input type =textname =name [2] [first]value =derp> < input type =textname =foovalue =bar> < / form>< pre id =output>< / pre>

除了整个表单之外，您还可以在其他选择器上调用它。例如，调用：

$（'input [name ^ =name \\ []'）。serializeControls（） / code>

将返回一个仅包含名称字段的对象。有关更多示例，请参阅 http://codepen.io/alexweissman/pen/MyWZdN 。

请注意（现在），这对带有空括号的字段名称不起作用（例如，像 input name =potatoes [] 将被忽略，因为无法提取唯一的密钥）。

I have a form on my site like this:

<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>

I want to simply grab all the data and send it to a webservice so have this js:

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

Problem is, it creates the json with all the brackets shown in the input names so I get a parse error.

How can I use serializeArray and get proper json?

The resulting format that I would like to see is something like this:

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

Thanks!

解决方案

I made a recursive function/plugin to do exactly this:

$.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>

You can also call it on other selectors besides the entire form. For example, calling:

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

will return an object containing only the name fields. See http://codepen.io/alexweissman/pen/MyWZdN for more examples.

Please note that (for now), this will not work for field names with empty brackets (for example, fields like input name="potatoes[]" will be ignored because a unique key cannot be extracted).

这篇关于jquery使用数组序列化输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！