Wie konvertiere ich jQuery.serialize () -Daten in ein JSON-Objekt?

var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
    data[obj.name] = obj.value;
});

Einfach und schnell;)

Ich hatte kürzlich genau dieses Problem. Anfangs haben wir die serializeArray() - Methode von jQuery verwendet, diese enthält jedoch keine deaktivierten Formularelemente. Oft werden Formularelemente, die mit anderen Quellen auf der Seite "synchronisiert" werden, deaktiviert. Die Daten müssen jedoch weiterhin in unser serialisiertes Objekt aufgenommen werden. Also ist serializeArray() aus. Wir haben den Selektor :input verwendet, um alle Eingabeelemente (sowohl aktiviert als auch deaktiviert) in einem bestimmten Container abzurufen, und dann $.map(), um unser Objekt zu erstellen.

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

Damit dies funktioniert, benötigt jede Ihrer Eingaben ein name-Attribut, das der Name der Eigenschaft des resultierenden Objekts ist.

Das ist etwas von dem, was wir verwendet haben. Wir mussten ein Objekt erstellen, das als .NET-IDictionary strukturiert war. Daher haben wir Folgendes verwendet: (Ich gebe es hier an, falls es nützlich ist)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

Ich mag beide Lösungen, weil sie einfache Funktionen der Funktion $.map() sind und Sie die vollständige Kontrolle über Ihren Selektor haben (also welche Elemente Sie in Ihrem Ergebnisobjekt einschließen). Außerdem ist kein zusätzliches Plugin erforderlich. Einfache alte jQuery.

Verwenden Sie das jQuery.serializeJSON plugin . Es konvertiert Formulare mit demselben Format wie in einem Rails-Params-Objekt, das sehr standardisiert und getestet ist.

Ich verwende dieses sehr kleine jQuery-Plugin, das ich von DocumentCloud erweitert habe:

https://github.com/documentcloud/documentcloud/blob/master/public/javascripts/lib/jquery_extensions.js

Es handelt sich im Wesentlichen um zwei Zeilen Code, aber es erfordert _.js (Underscore.js), da es auf einer reduce-Funktion basiert.

$.fn.extend({
  serializeJSON: function(exclude) {
    exclude || (exclude = []);
    return _.reduce(this.serializeArray(), function(hash, pair) {
      pair.value && !(pair.name in exclude) && (hash[pair.name] = pair.value);
      return hash;
    }, {});
  }
});

Erweiterungen:

• Ein Eingabewert wird nicht serialisiert, wenn er null ist
• Es kann einige Eingaben ausschließen, indem ein Array von Eingabenamen an das Argument exclude übergeben wird. i.e. ["password_confirm"]

Eine äquivalente Lösung für Danilo Colassos , mit den gleichen Vor- und Nachteilen von .serializeArray() (im Grunde verwendet .reduce anstelle von $.each).

Mit wenig Aufwand können die zusätzlichen Funktionen in den Antworten von S.C. implementiert werden, ohne dass Erweiterungen erforderlich sind.

$(selector).serializeArray()
    .reduce(function(accum, item) {
        // This 'if' allows ignoring some values
        if (-1 === [ 'ignoreThis', 'andThat' ].indexOf(item.name)) {
            // This allows ignoring NULL values
            if (item.value !== null) {
                accum[item.name] = item.value;
            }
        }
        return accum;
    },
    {
        // By supplying some initial values, we can add defaults
        // for, say, disabled form controls.
        preFilledName:  preFilledValue, // optional
        defaultName  :  defaultValue    // optional
    }
);

Unterstrich & jQuery verwenden 

var formdata = $("#myform").serializeArray();
var data = {};
_.each(formdata, function(element){
// Return all of the values of the object's properties.
  var value = _.values(element);
// name : value 
  data[value[0]] = value[1];
});
console.log(data); //Example => {name:"alex",lastname:"amador"}

Ich denke, es gibt eine Menge guter Antworten, und ich habe aus diesen Antworten meine eigene Funktion gemacht.

function formToJSON(f) {
    var fd = $(f).serializeArray();
    var d = {};
    $(fd).each(function() {
        if (d[this.name] !== undefined){
            if (!Array.isArray(d[this.name])) {
                d[this.name] = [d[this.name]];
            }
            d[this.name].Push(this.value);
        }else{
            d[this.name] = this.value;
        }
    });
    return d;
}

//The way to use it :
$('#myForm').submit(function(){
    var datas = formToJSON(this);
    return false;
});

Lassen Sie mich im Grunde erklären, warum ich diese Lösung vorziehen möchte: Wenn Sie mehrere Eingaben mit demselben Namen haben, werden alle Werte in einem Array gespeichert. Wenn dies nicht der Fall ist, wird der Wert direkt als Indexwert gespeichert in der JSON ... Hier unterscheidet es sich von die Antwort von Danilo Colasso wo die zurückgegebene JSON nur auf Array-Werten basiert ...

Wenn Sie also ein Formular mit einem Textbereich mit dem Namen content und mehreren hors haben, wird diese Funktion an Sie zurückgegeben: 

{
    content : 'This is The Content',
    authors : 
        [
            0: 'me',
            1: 'you',
            2: 'him',
        ]
}

var formdata = $("#myform").serializeArray();

var data = {};

$(formdata ).each(function(index, obj){

         if(data[obj.name] === undefined)
              data[obj.name] = [];

          data[obj.name].Push(obj.value);

});

Bei allen gegebenen Antworten gibt es ein Problem, das ist ...

Wenn der eingegebene Name als Array wie name[key], aber es wird so generiert

 name:{
   key : value
 }

Beispielsweise : Wenn ich so eine Form habe.

    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
    </form>

Dann wird es ein Objekt wie dieses mit allen gegebenen Antworten erzeugen.

Object {
    name : 'value',
    name1[key1] : 'value1',
    name2[key2] : 'value2',
    name3[key3] : 'value3', 
}

Aber es muss wie unten generieren, jeder möchte so wie unten werden.

Object {
    name : 'value',
    name1 : {
        key1 : 'value1'
    },
    name2 : {
        key2 : 'value2'
    },
    name3 : {
        key2 : 'value2'
    }
}

Dann versuchen Sie dies unter js Code.

(function($){
    $.fn.getForm2obj = function(){
        var _ = {},_t=this;
        this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
        this.b = function(k,v,a = 0){ if(a) eval(k+".Push("+v+");"); else eval(k+"="+v+";"); };
        $.map(this.serializeArray(),function(n){
            if(n.name.indexOf('[') > -1 ){
                var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
                $.map(keys,function(key,i){
                    if(key == ''){
                        eval("ale = Object.keys("+tmp+").length;");
                        if(!ale) _t.b(tmp,'[]');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
                        else _t.b(tmp += "["+ale+"]",'{}');
                    }else{
                        _t.c(tmp += "['"+key+"']",'{}');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
                    }
                });
            }else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
        });
        return _;
    }
})(jQuery);
console.log($('form').getForm2obj());

<!DOCTYPE html><html><head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
        <input type="checkbox" name="name4[]" value="1" checked="checked">
        <input type="checkbox" name="name4[]" value="2">
        <input type="checkbox" name="name4[]" value="3">
    </form>
</body></html>

wenn Sie ajax-Requests verwenden, ist es nicht nötig, json-object nur $('#sampleform').serialize() vorzubereiten, oder wenn Sie einen anderen Zweck haben, ist hier meine Lösung:

var formserializeArray = $("#sampleform").serializeArray();   
var jsonObj = {};
jQuery.map(formserializeArray , function (n, i) {
    jsonObj[n.name] = n.value;
});