jQuery Form - 序列化为多维数组？

Question

我需要从form 获取值，将其格式化为 JSON 并通过 AJAX 发布。这是我想要实现的格式：

{
  items: [
    { id: 7, name: 'Book', price: 5.7 },
    { id: 5, name: 'Pencil', price: 2.5 }
  ]
}

这是 HTML：

(function($){
  
  var $form = $('form');
  
  // serializeArray format is way off from what I need
  var rawData = $form.serializeArray();
  console.log(rawData)
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>
  
  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

我应该循环并使用正则表达式来解析name吗？还是有内置方式？

如果需要，我可以更改<form> 格式。

Answer 1

这里不能使用默认的序列化，而是可以像这样手动进行序列化

(function($) {

  var $fieldsets = $('form fieldset');

  var items = $fieldsets.map(function(i, fs) {
    var obj = {};
    $(fs).find('input').each(function() {
      obj[this.name.match(/\[([^\[]*)\]$/)[1]] = this.value;
    });
    return obj;
  }).get();

  var rawData = {
    items: items
  };
  console.log(rawData)

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>

  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

Answer 2

请看看这种方法。我们不能只使用$.serializeArray()，还需要一些自定义代码，如下所示。实际上，我们需要遍历所有 <fieldset> 来获取我们需要的 JSON：

(function($) {

  var $form = $('form');
  var fieldSets = $form.find("fieldset");
  var result = {
    items: []
  };
  fieldSets.each(function() {
    var fields = {};
    $.each($(this).serializeArray(), function() {
      fields[this.name] = this.value;
    });
    result.items.push(fields);
  });

  console.log(result);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="id" value="7">
    <input type="text" name="name" value="Book">
    <input type="number" name="price" value="5.7">
  </fieldset>

  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="id" value="5">
    <input type="text" name="name" value="Pencil">
    <input type="number" name="price" value="2.5">
  </fieldset>
</form>

注意：稍微修改了 HTML，而不是 name="items[0][id]" 我给出的 name="id"

Answer 3

是的，您需要自己解析name 字段。没有解析自定义字段的自动化方法。当然，有多种方法可以做到这一点。

注意：我假设您的 name="items[0][id]" 字段指定这必须是结果数组中的第 0 项，并且此类 <input> 字段集不一定按项目 # 升序排列DOM。换句话说，item[N] 应该控制它成为<form> 中的第 Q 个<fieldset>。

您可以使用 serializeArray() 然后处理该数据：

(function($){
  
  var $form = $('form');
  var data = $form.serializeArray();
  var result =  {items:[]};
  data.forEach(function(input){
    nameArray = input.name.split(/[[\]]/);
    item = nameArray[1];
    prop = nameArray[3];
    if(typeof result.items[item] !== 'object'){
      result.items[item]={};
    }
    if(typeof result.items[item][prop] !== 'undefined'){
      //Consistency check the name attribute
      console.log('Warning duplicate "name" property =' + input.name);
    }
    result.items[item][prop]=input.value;
  });
  console.log(result);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>
  
  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>

或者，您可以直接从 DOM 处理它：

(function($){

  var result =  {items:[]};
 
  $('form fieldset input').each(function(){
    nameArray = this.name.split(/[[\]]/);
    item = nameArray[1];
    prop = nameArray[3];
    if(typeof result.items[item] !== 'object'){
      result.items[item]={};
    }
    if(typeof result.items[item][prop] !== 'undefined'){
      //Consistency check the name attribute
      console.log('Warning duplicate "name" property =' + this.name);
    }
    result.items[item][prop]=this.value;
  });
  console.log(result);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset>
    <h2>Product 1</h2>
    <input type="hidden" name="items[0][id]" value="7">
    <input type="text" name="items[0][name]" value="Book">
    <input type="number" name="items[0][price]" value="5.7">
  </fieldset>
  
  <fieldset>
    <h2>Product 2</h2>
    <input type="hidden" name="items[1][id]" value="5">
    <input type="text" name="items[1][name]" value="Pencil">
    <input type="number" name="items[1][price]" value="2.5">
  </fieldset>
</form>