10

您如何将 HTML 表单数据序列化为关联数组，而不是使用 jQuery 生成的 $.serializeArray() 数字索引格式？

jQuery.serializeArray 给出的输出使得使用数字索引键直接选择值变得困难，当在表单输入中使用复选框时，可能会发生轻微的索引移位。

serializeArray 的输出

[
  0: [name: 'field-1', value: 'val1'],
  1: [name: 'check', value: 'val2'],
  2: [name: 'check', value: 'val3']
]

期望的输出-更可靠的格式和更简单的值访问

[
  'field-1' : 'val1',
  'check' : [ 0 : 'val2', 1 : 'val3' ]
]
4

1 回答 1

6

2021 年更新

这是一个非常古老的问题，现代 JavaScript 现在更加宽容，使得发布的原始解决方案已经过时，对 JavaScript 的改进也使得 jQuery 相当过时。

自从这篇原始文章以来，我们取得了长足的进步，支持序列化数组、对象甚至两者的嵌套组合，在字体/后端环境中来回 JSON 变得更加简单。

查看以下用于提交复杂用户输入的选项：

本国的

使用 JSON

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

使用 JSON 请求选项获取示例

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options

爱讯

替代fetch原生 ES6+ JavaScript。Axios 将为您处理数组和对象的序列化。

https://github.com/axios/axios

节点JS

QueryString - 如果您的项目支持，您可以从 NodeJS 导入此帮助程序类。

https://nodejs.org/api/querystring.html）

以下旧内容过时

对我有用的解决方案是编写我自己的 jQuery 函数 $.serializeAssoc() 和 $.serializeObject() 替代方案，它们还可以处理来自表单上的多选选项的多维数组。

这两个功能各有利弊；我使用 serializeAssoc 来简化直接通用值访问的表单数据，通常在 JS 验证中。

serializeObject 在使用自定义数字键索引的多功能表单中派上用场，简化从多选字段的复杂表单设置或表单中提交的信息的数据配对，其中表单中的数据具有父子关系，其中表单中的数据具有父子关系， serializeAssoc 不能很好地处理的东西。

序列化关联

以下函数允许长度检查，但会出现自定义数字键索引的问题，在 AJAX 调用中提交数组时会导致索引填充

$.fn.serializeAssoc = function() {
  var data = {};
  $.each( this.serializeArray(), function( key, obj ) {
    var a = obj.name.match(/(.*?)\[(.*?)\]/);
    if(a !== null)
    {
      var subName = a[1];
      var subKey = a[2];

      if( !data[subName] ) {
        data[subName] = [ ];
      }

      if (!subKey.length) {
        subKey = data[subName].length;
      }

      if( data[subName][subKey] ) {
        if( $.isArray( data[subName][subKey] ) ) {
          data[subName][subKey].push( obj.value );
        } else {
          data[subName][subKey] = [ ];
          data[subName][subKey].push( obj.value );
        }
      } else {
        data[subName][subKey] = obj.value;
      }
    } else {
      if( data[obj.name] ) {
        if( $.isArray( data[obj.name] ) ) {
          data[obj.name].push( obj.value );
        } else {
          data[obj.name] = [ ];
          data[obj.name].push( obj.value );
        }
      } else {
        data[obj.name] = obj.value;
      }
    }
  });
  return data;
};

序列化对象

下面的函数允许自定义数字索引而不会导致填充，但会阻止长度检查。如果需要，使用 each 循环检查索引键计数。如果在 AJAX 调用中提交对象，您必须首先使用 JSON.Stringify 并将值传递给要在服务器端解码的 var，因为直接使用会在某些浏览器中导致 Unexpected end of line 错误。

$.fn.serializeObject = function() {
    var data = {};
    $.each( this.serializeArray(), function( key, obj ) {
        var a = obj.name.match(/(.*?)\[(.*?)\]/);
        if(a !== null)
        {
            var subName = new String(a[1]);
            var subKey = new String(a[2]);
            if( !data[subName] ) {
              data[subName] = { };
              data[subName].length = 0;
            };
            if (!subKey.length) {
                subKey = data[subName].length;
            }
            if( data[subName][subKey] ) {
              if( $.isArray( data[subName][subKey] ) ) {
                data[subName][subKey].push( obj.value );
              } else {
                data[subName][subKey] = { };
                data[subName][subKey].push( obj.value );
              };
            } else {
                data[subName][subKey] = obj.value;
            };
            data[subName].length++;
        } else {
            var keyName = new String(obj.name);
            if( data[keyName] ) {
                if( $.isArray( data[keyName] ) ) {
                    data[keyName].push( obj.value );
                } else {
                    data[keyName] = { };
                    data[keyName].push( obj.value );
                };
            } else {
                data[keyName] = obj.value;
            };
        };
    });
    return data;
};

用法：

添加功能

<script>
  (function($){
    $.fn.serializeAssoc = function() {
      ... As Presented Above ...
    };
    $.fn.serializeObject = function() {
      ... As Presented Above ...
    };
  })(jQuery);
</script>

样本表格

<form id="myForm">
  <input type="text" name="myName" />

  <select name="consoles" multiple>
    <option selected>PC</option>
    <option selected>XBOX 360</option>
    <option selected>PS3</option>
  </select>

  <input type="text" name="sample[100]" value="Mario" />
  <input type="text" name="sample[101]" value="Brothers" />

  <input type="submit" name="submit" value="Submit" />
</form>

使用功能

<script>
  (function($) {
    $('#myForm').submit(function(e){
      e.preventDefault();
      var formData = $('#myForm').serializeAssoc();
      console.log(formData);
    });
  })(jQuery);
</script>

动态表单示例

<form id="myForm">
  <input type="text" name="myName" value="Spuggy" />

  <div id="characters">
    <input type="text" name="character[]" value="Mario" />
    <input type="text" name="character[]" value="Sonic" />
  </div>

  <div id="consoles">
    <input type="text" name="console[xbox]" value="XBOX One" />
    <input type="text" name="console[playstation]" value="PlayStation 4" />
  </div>

  <input type="submit" name="submit" value="Submit" />
</form>

<script>
  (function($) {
    $('#myForm').submit(function(e){
      e.preventDefault();
      var formData = $('#myForm').serializeAssoc();
      console.log(formData);
    });
  })(jQuery);
</script>

动态表单输出

[
  myName: 'Spuggy',
  character: [
    0: 'Mario',
    1: 'Sonic'
  ],
  console: [
    'xbox': 'XBOX One',
    'playstation': 'PlayStation 4'
  ]
]
于 2013-10-28T19:21:01.090 回答