如何使用 JavaScript/jQuery 获取表单数据？答案

【问题标题】：How can I get form data with JavaScript/jQuery?如何使用 JavaScript/jQuery 获取表单数据？
【发布时间】：2011-01-17 14:26:09
【问题描述】：

是否有一种简单的单行方式来获取表单的数据，就像以经典的纯 HTML 方式提交时一样？

例如：

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

输出：

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

这样的事情太简单了，因为它没有（正确地）包括文本区域、选择、单选按钮和复选框：

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

【问题讨论】：

另一个类似的问题：stackoverflow.com/questions/169506/…

标签： javascript jquery forms

【解决方案1】：

使用$('form').serializeArray()，它返回一个数组：

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

其他选项是$('form').serialize()，它返回一个字符串：

"foo=1&bar=xxx&this=hi"

看看this jsfiddle demo

【讨论】：

serializeArray 如果返回一个带有键值对的对象会更有用
我同意一个对象是理想的。但是，有一个问题——一个键可以有多个值。你会返回一个键-“值数组”对象，还是键-“第一个值”或其他东西？我认为 jQuery 家伙没有选择上述任何一个:)
注意多个值的问题（如上面提到的@Paul），name="multiple[]" 的复选框和多个输入不起作用。 POST 方法的解决方案是相同的，只需使用 $('form').serialize()。此外，POST 方法不像 GET 在大多数浏览器中那样有 2000 个字符的限制，因此即使是非常大的数据也可以使用。
还请注意，为了记录来自任何表单输入的值，输入必须具有name 属性。
@GetFree 为什么不直接使用 jQuery 地图功能呢？函数 getFormData(form) { var rawJson = form.serializeArray();变种模型 = {}; $.map(rawJson, function (n, i) { model[n['name']] = n['value']; });返回模型； }

【解决方案2】：

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

demo

【讨论】：

关闭，但可能会返回一个包含键值对而不是单个字符串的数组？
Nvm，在 serialize() 函数的 cmets 中找到它。它被称为序列化数组。它返回一个数组数组（其中包含一个条目“名称”和“值”），但这应该很容易转换。
并且使用下划线库可以转换为：_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))
@BartvanHeukelom 我知道这是 4 年后，但 .serializeArray() 将返回一个数组。

【解决方案3】：

2014 年更新答案： HTML5 FormData 这样做

var formData = new FormData(document.querySelector('form'))

然后您可以按原样发布 formData - 它包含表单中使用的所有名称和值。

【讨论】：

FormData 加一个很好用，但值得注意的是，如果您想读取 FormData 中的数据，这并不是那么容易（参见stackoverflow.com/questions/7752188/…）
@StackExchangeWhatTheHeck 你是什么意思？ formData.get('something')

【解决方案4】：

基于jQuery.serializeArray，返回键值对。

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

【讨论】：

键值对在这里，伙计们，大家来这里！是金色的！！！谢谢！如果我想要一个名为“retailer”的元素的值，我会这样做 console.log($('#form').serializeArray().reduce(function(obj, item) { obj[item.name] = item.值；返回 obj；}，{})['retailer']);

【解决方案5】：

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

这是一个挑剔的答案，但让我解释一下为什么这是一个更好的解决方案：

我们正在正确处理表单提交而不是按钮按下。有些人喜欢在字段上按输入。有些人使用替代输入设备，例如语音输入或其他辅助设备。处理表单提交，您为每个人正确解决它。
我们正在挖掘提交的实际表单的表单数据。如果您稍后更改表单选择器，则不必更改所有字段的选择器。此外，您可能有多个具有相同输入名称的表单。无需消除过多 ID 的歧义，只需根据提交的表单跟踪输入。这也使您能够为适合您的情况的多个表单if使用单个事件处理程序。
FormData 接口相当新，但受到浏览器的良好支持。这是构建数据收集以获取表单中内容的真实价值的好方法。没有它，您将不得不遍历所有元素（例如form.elements）并找出检查的内容，未检查的内容，值是什么等。如果您需要旧的浏览器支持，完全有可能，但FormData接口更简单。
我在这里使用的是 ES6……无论如何都不是必需的，所以如果您需要旧的浏览器支持，请将其改回 ES5 兼容。

【讨论】：

【解决方案6】：

现在是 2019 年，有更好的方法来做到这一点：

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

或者如果你想要一个普通的对象

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

尽管请注意，这不适用于重复键，例如从多选和具有相同名称的重复复选框中获得的重复键。

【讨论】：

【解决方案7】：

最简单的方法，2021 年。

document.querySelector('form').addEventListener('submit', (e) => {
  const data = Object.fromEntries(new FormData(e.target).entries());
  console.log(data)
});

输出

{ name: 'Stackoverflow' }

【讨论】：

是的！ js 在我心目中依然不是 2021 年对开发者友好的语言~为什么不只是e.target.toJson()~

【解决方案8】：

使用 .serializeArray() 获取数组格式的数据，然后转换成对象：

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

【讨论】：

【解决方案9】：

这是一个非常简单而简短的解决方案，甚至不需要 Jquery。

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

【讨论】：

这不适用于单选按钮：最后一个选项始终是存储到 postData 的选项。

【解决方案10】：

我用这个：

jQuery 插件

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML 表单

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

获取数据

var myData = $("#myForm").getFormData();

【讨论】：

请注意，一年后我现在认为这是一个糟糕的答案，没有人应该使用它。正如前面的评论所说，单选按钮之类的东西不起作用。上面有更好的答案，请改用其中一个。

【解决方案11】：

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

除此之外，您可能还想看看serialize()；

【讨论】：

【解决方案12】：

这是一个仅适用于 JavaScript 的实现，可以正确处理复选框、单选按钮和滑块（可能还有其他输入类型，但我只测试过这些）。

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

工作示例：

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

编辑：

如果您正在寻找更完整的实现，请查看this section of the project I made this for。我最终会用我想出的完整解决方案来更新这个问题，但也许这会对某人有所帮助。

【讨论】：

【解决方案13】：

我已经提供了答案，以还回所需的对象。

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

【讨论】：

这根本不会处理数组； foo[bar][] = 'qux' 应该序列化为 { foo: { bar: [ 'qux' ] } }。

【解决方案14】：

如果您使用的是 jQuery，这里有一个小函数可以满足您的需求。

首先，在你的表单中添加一个 ID（除非它是页面上唯一的表单，那么你可以使用 'form' 作为 dom 查询）

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

输出如下：

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

【讨论】：

【解决方案15】：

基于神经元的响应，我创建了一个简单的 JQuery 方法，它以键值对的形式获取表单数据，但它适用于多选和 name='example[]' 的数组输入。

它是这样使用的：

var form_data = $("#form").getFormObject();

您可以在下面找到其定义及其工作原理的示例。

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});

/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>

【讨论】：

【解决方案16】：

您也可以使用FormData 对象； FormData 对象允许您编译一组键/值对以使用 XMLHttpRequest 发送。它主要用于发送表单数据，但可以独立于表单使用以传输键控数据。

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

【讨论】：

【解决方案17】：

这会将所有表单字段附加到 JavaScript 对象“res”：

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

【讨论】：

【解决方案18】：

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

【讨论】：

【解决方案19】：

对于那些更喜欢Object 而不是序列化字符串（如$(form).serialize() 返回的字符串，并且对$(form).serializeArray() 略有改进）的人，请随意使用以下代码：

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

要执行它，只需使用Form.serialize(form)，该函数将返回一个类似于此的Object：

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

另外，这意味着您不必为一个序列化函数安装整个 jQuery 包。

【讨论】：

【解决方案20】：

我写了一个库来解决这个问题：JSONForms。它采用一个表单，遍历每个输入并构建一个您可以轻松阅读的 JSON 对象。

假设你有以下表格：

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

将表单传递给 JSONForms 的 encode 方法会返回以下对象：

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

这是demo 和您的表单。

【讨论】：

【解决方案21】：

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

【讨论】：

【解决方案22】：

您可以使用this function 获取来自表单的对象或 JSON。

使用它：

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }

【讨论】：

【解决方案23】：

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};

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

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

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

</form>

Codepen

【讨论】：

【解决方案24】：

我编写了一个处理多个复选框和多个选择的函数。在这些情况下，它会返回一个数组。

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

【讨论】：

【解决方案25】：

显示表单输入元素字段和输入文件以在不刷新页面的情况下提交表单并获取包含文件的所有值在这里它是

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>

在提交按钮页面上将向您的 php 文件发送 ajax 请求。

$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))

【讨论】：

【解决方案26】：

$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

它将解决问题：无法使用多选。

【讨论】：

【解决方案27】：

这是我在 vanilla JS 中的版本（在 Chrome 上测试）

适用于：

name="输入"
name="form[name]"（创建一个对象）
name="checkbox[]"（用数组创建对象）
name="form[checkbox][]"（创建一个数组）
name="form[select][name]"（创建一个对象，其对象只包含选定的值）

/**
 * Get the values from a form
 * @param formId ( ID without the # )
 * @returns {object}
 */
function getFormValues( formId )
{
    let postData = {};
    let form = document.forms[formId];
    let formData = new FormData( form );

    for ( const value of formData.entries() )
    {
        let container = postData;
        let key = value[0];
        let arrayKeys = key.match( /\[[\w\-]*\]/g ); // Check for any arrays

        if ( arrayKeys !== null )
        {
            arrayKeys.unshift( key.substr( 0, key.search( /\[/ ) ) );  // prepend the first key to the list
            for ( let i = 0, count = arrayKeys.length, lastRun = count - 1; i < count; i++ )
            {
                let _key = arrayKeys[i];
                _key = _key.replace( "[", '' ).replace( "]", '' ); // Remove the brackets []
                if ( _key === '' )
                {
                    if ( ! Array.isArray( container ) )
                    {
                        container = [];
                    }

                    _key = container.length;
                }

                if ( ! (_key in container) ) // Create an object for the key if it doesn't exist
                {
                    if ( i !== lastRun && arrayKeys[i + 1] === '[]' )
                    {
                        container[_key] = [];
                    }
                    else
                    {
                        container[_key] = {};
                    }
                }

                if ( i !== lastRun ) // Until we're the last item, swap container with it's child
                {
                    container = container[_key];
                }

                key = _key;
            }
        }
        container[key] = value[1]; // finally assign the value
    }

    return postData;
}

【讨论】：

【解决方案28】：

我有点惊讶，因为没有人提到下面的解决方案。

通过 document.forms.namedItem 函数获取表单数据

var form = document.forms.namedItem("fileinfo");

form.addEventListener('submit', function(ev) {
   var oData = new FormData(form);
}

HT

<form name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

【讨论】：

【解决方案29】：

你们都不完全正确。你不能写：

formObj[input.name] = input.value;

因为这样，如果您有多选列表 - 它的值将被最后一个覆盖，因为它被传输为：“param1”：“value1”，“param1”：“value2”。

所以，正确的做法是：

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

【讨论】：

【解决方案30】：

这个方法应该可以。它序列化表单数据，然后将它们转换为对象。还负责处理多组复选框。

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

【讨论】：