使用jQuery将表单数据转换为JavaScript对象

如何将表单的所有元素转换为JavaScript对象？

我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；

当前回答

从一些旧的答案来看：

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

2015-06-13 21:31:23

其他回答

如果您想将表单转换为javascript对象，那么最简单的解决方案（此时）是使用jQuery的each和serializArray函数方法。

$.fn.serializeObject = function() {

  var form = {};
  $.each($(this).serializeArray(), function (i, field) {
    form[field.name] = field.value || "";
  });

  return form;
};

GitHub上托管的插件：https://github.com/tfmontague/form-object/blob/master/README.md

可与Bower一起安装：船首装置git://github.com/tfmontague/form-object.git

2015-05-31 07:13:53

这会把一切都考虑在内

函数formToObject（表单）{let data=新FormData（表单）；let queryString=新URLSearchParams（data）.toString（）；var obj={}；var params=queryString.split（“&”）；对于（var i=0；i<params.length；i++）{var param=params[i].split（“=”）；var key=param[0].replace（“[]”，“”）；var key=密钥.替换（“%5B%5 D”，“”）；var值=参数[1]；if（obj[key]==未定义）{obj[key]=值；}else if（数组的obj[key]实例）{obj[key].push（值）；}其他{obj[key]=[obj[key]，值]；}}控制台日志（obj）返回obj；}<!DOCTYPE html><html><head><title>表单示例</title></head><body style=“height:800px；溢出：滚动”><form id=“test”onchange=“formToObject（this）”><div><h3>水果</h3><input type=“checkbox”name=“fruit”value=“apple”id=“apple“><label for=“apple”>Apfel</label><input-type=“checkbox”name=“fruit”value=“banana”id=“banana“><label for=“banana”>Banane</label><input type=“checkbox”name=“fruit”value=“cherry”id=“cherr”><label for=“cherry”>Kirsche</label><input type=“checkbox”name=“fruit”value=“葡萄”id=“葡萄”><label for=“葡萄”>Traube</label><input type=“checkbox”name=“fruit”value=“pear”id=“pear“><label for=“pear”>Birne</label></div><div><h3>多个选项</h3><select multiple name=“manyOptions[]”><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></div>＜div＞＜h3＞检查选项</h3><input type=“radio”name=“onceOption”value=“Option 1”>选项1<br><input type=“radio”name=“onceOption”value=“Option 2”>选项2<br><input type=“radio”name=“onceOption”value=“Option 3”>选项3<br></div></form></body></html>

2022-12-09 09:29:18

这是对Tobias Cohen函数的改进，该函数在多维数组中运行良好：

http://jsfiddle.net/BNnwF/2/

然而，这不是一个jQuery插件，但如果您想这样使用它，只需几秒钟就可以将它变成一个：只需替换函数声明包装器：

function serializeFormObject(form)
{
    ...
}

具有：

$.fn.serializeFormObject = function()
{
    var form = this;
    ...
};

我想这与梅斯克的解决方案相似，因为它做了相同的事情，但我认为这有点干净和简单。我还将macek的测试用例输入添加到小提琴中，并添加了一些额外的输入。到目前为止，这对我来说很好。

function serializeFormObject(form)
{
    function trim(str)
    {
        return str.replace(/^\s+|\s+$/g,"");
    }

    var o = {};
    var a = $(form).serializeArray();
    $.each(a, function() {
        var nameParts = this.name.split('[');
        if (nameParts.length == 1) {
            // New value is not an array - so we simply add the new
            // value to the result object
            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 || '';
            }
        }
        else {
            // New value is an array - we need to merge it into the
            // existing result object
            $.each(nameParts, function (index) {
                nameParts[index] = this.replace(/\]$/, '');
            });

            // This $.each merges the new value in, part by part
            var arrItem = this;
            var temp = o;
            $.each(nameParts, function (index) {
                var next;
                var nextNamePart;
                if (index >= nameParts.length - 1)
                    next = arrItem.value || '';
                else {
                    nextNamePart = nameParts[index + 1];
                    if (trim(this) != '' && temp[this] !== undefined)
                        next = temp[this];
                    else {
                        if (trim(nextNamePart) == '')
                            next = [];
                        else
                            next = {};
                    }
                }

                if (trim(this) == '') {
                    temp.push(next);
                } else
                    temp[this] = next;

                temp = next;
            });
        }
    });
    return o;
}

2012-09-18 15:26:33

对于这个问题，我找到的最简单、最准确的方法是使用bbq插件或这个插件（大约0.5K字节大小）。

它也适用于多维阵列。

$.fn.serializeObject=函数（）{return$.departam（this.serialize（））；};

2015-12-08 09:50:25

所以我使用了公认的答案，发现了一个主要缺陷。它不支持以下输入数组：

<input type="checkbox" name="array[]" value="1"/>
<input type="checkbox" name="array[]" value="2"/>
<input type="checkbox" name="array[]" value="3"/>

这一小改动应该可以解决以下问题：

function objectifyForm(inp){
    var rObject = {};
    for (var i = 0; i < inp.length; i++){
        if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){
            var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2);
            if(Array.isArray(rObject[tmp])){
                rObject[tmp].push(inp[i]['value']);
            } else{
                rObject[tmp] = [];
                rObject[tmp].push(inp[i]['value']);
            }
        } else{
            rObject[inp[i]['name']] = inp[i]['value'];
        }
    }
    return rObject;
}

记住将$（this）.serializeArray（）的输出传递给它；否则它不会起作用。

2017-10-08 13:59:47

使用jQuery将表单数据转换为JavaScript对象

推荐文章

最新文章

标签