如何使用 jQuery 从表单元素创建 javascript 对象答案

【问题标题】：How to create javascript object from form elements using jQuery如何使用 jQuery 从表单元素创建 javascript 对象
【发布时间】：2010-03-24 19:53:02
【问题描述】：

我希望能够从我的 html 表单创建一个 javascript 对象，并且想知道是否有使用 jquery 的好方法。我想我正在寻找类似于$.serialize 的东西，但它会导致映射而不是字符串。

<form>
  <input type="text" name="foo1" value="bar1" />
  <input type="text" name="foo2" value="bar2" />
</form>

想要的结果：

{ foo1:"bar1", foo2:"bar2" }

【问题讨论】：

标签： jquery html serialization forms

【解决方案1】：

var oElements = {};
$('form [name]').each(function(){
    oElements[this.name] = this.value;
});

【讨论】：

如何用纯 JavaScript 制作？

【解决方案2】：

这里对使用 jQuery 的主题进行了更强大的处理。 extractObjectFromForm 采用包含元素和任意对象实例的字段的选择器。这适用于已知和未知 (grin) 输入类型。它还可以创建包含嵌套元素的复杂对象结果。

/**
 * Extracts form elements and maps to passed in object
 */
function    extractObjectFromForm($fieldContainer,objectType) {
    var innerArray=[];
    var obj = $.map($fieldContainer.find(":input"), function(n, i)
    {
        var o = {};
        if($(n).is("input:text") 
                || $(n).is("textarea") 
                || $(n).is("input:hidden") 
                || $(n).is("input:password"))
            o[n.name] = $(n).val();
        else if($(n).is("input:checkbox"))
            o[n.name] = ($(n).is(":checked") ? true:false);
        else if(n.type == 'radio') {
            if(innerArray.indexOf(n.name)==-1) {
                innerArray.push(n.name);
            }
        }
        else
            o[n.name] = $(n).val();
        return o;
    });
    $.each(innerArray,function(index,item){
        var iobj={};
        iobj[item]=$("input[name='"+item+"']:checked").val();
        obj.push(iobj);
    });
    return getObjectFromObject(obj,objectType);
}

/**
 * Takes a object created from a form scour and
 * converts it to an Object type
 */
function    getObjectFromObject(formObject,outputObject) {
    $.each(formObject,function(index,item){
        $.each(item,function(key,value){
            if(key.indexOf(".") == -1)
                outputObject[key] = value;
            else {
                var mainkey = key.substr(0,key.indexOf("."));
                var subkey = key.substr(key.indexOf(".")+1);
                outputObject[mainkey][subkey]=value;
            }
        });
    });
    return outputObject;
}

【讨论】：

【解决方案3】：

serializeArray() 怎么样 http://api.jquery.com/serializeArray/

更新：还发现了这个插件，它与其他发布者的答案基本相同，但看起来它可以处理嵌套数组。 http://github.com/cowboy/jquery-misc/blob/master/jquery.ba-serializeobject.js

【讨论】：

不，我想不是。我的错。