Konvertieren von Formulardaten in ein JavaScript-Objekt mit jQuery

Question

Wie kann ich alle Elemente meines Formulars in ein JavaScript-Objekt umwandeln?

Ich möchte eine Möglichkeit haben, automatisch ein JavaScript-Objekt aus meinem Formular zu erstellen, ohne jedes Element in einer Schleife durchlaufen zu müssen. Ich möchte keine Zeichenkette, wie sie von $('#formid').serialize(); noch will ich die Karte, die von $('#formid').serializeArray();

Answer 1

Ok, ich weiß, dass diese Frage bereits eine hoch bewertete Antwort hat, aber eine weitere eine ähnliche Frage wurde gestellt und ich wurde auch auf diese Frage aufmerksam gemacht. Ich möchte auch meine Lösung anbieten, weil sie einen Vorteil gegenüber der akzeptierten Lösung bietet: Sie können deaktivierte Formularelemente einbeziehen (was manchmal wichtig ist, je nachdem, wie Ihre Benutzeroberfläche funktioniert)

Hier ist meine Antwort aus der andere SO Frage :

Ursprünglich verwendeten wir jQuery's serializeArray() Methode, die jedoch keine deaktivierten Formularelemente enthält. Häufig werden Formularelemente deaktiviert, die mit anderen Quellen auf der Seite "synchronisiert" werden, aber wir müssen die Daten trotzdem in unser serialisiertes Objekt aufnehmen. Also serializeArray() ist aus. Wir haben die :input Selektor, um alle Eingabeelemente (sowohl aktivierte als auch deaktivierte) in einem bestimmten Container zu erhalten, 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, muss jeder Ihrer Eingänge eine name Attribut, das den Namen der Eigenschaft des resultierenden Objekts darstellt.

Das ist tatsächlich etwas anders als das, was wir verwendet haben. Wir mussten ein Objekt erstellen, das wie ein .NET IDictionary strukturiert war, also haben wir folgendes verwendet: (Ich stelle es hier zur Verfügung, falls es nützlich ist)

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

Diese beiden Lösungen gefallen mir, weil sie eine einfache Anwendung der $.map() Funktion, und Sie haben die vollständige Kontrolle über Ihren Selektor (also darüber, welche Elemente Sie am Ende in Ihr resultierendes Objekt aufnehmen). Außerdem ist kein zusätzliches Plugin erforderlich. Einfaches altes jQuery.

Answer 2

Diese Funktion sollte mehrdimensionale Arrays mit mehreren Elementen mit demselben Namen verarbeiten.

Ich benutze es jetzt schon seit ein paar Jahren:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

Answer 3

Einzeiler (keine anderen Abhängigkeiten als jQuery), verwendet eine feste Objektbindung für Funktionen, die an map Methode.

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

Was bewirkt es?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

geeignet für progressive Webanwendungen (man kann problemlos sowohl normale Formularübermittlungsaktionen als auch Ajax-Anfragen unterstützen)

Answer 4

Sie können dies tun:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

Voir JSON .

Answer 5

Verwendung:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

Ausgabe:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}