it-swarm.com.de

Konvertieren Sie mit jQuery Formulardaten in ein JavaScript-Objekt

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

Ich hätte gerne eine Möglichkeit, ein JavaScript-Objekt automatisch aus meinem Formular zu erstellen, ohne jedes Element überlaufen zu müssen. Ich möchte keine Zeichenfolge, wie von $('#formid').serialize(); zurückgegeben, und auch nicht, dass die Map von $('#formid').serializeArray(); zurückgegeben wird.

1505
Yisroel

serializeArray macht genau das schon. Sie müssen nur die Daten in Ihr gewünschtes Format einmassieren:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

Achten Sie auf ausgeblendete Felder, die denselben Namen wie echte Eingaben haben, da sie überschrieben werden.

1590
Tobias Cohen

Formulare in JSON LIKE A BOSS konvertieren


Aktuelle Quelle ist auf GitHub und Bower.

$ bower install jquery-serialize-object


Der folgende Code ist jetzt veraltet.

Der folgende Code kann mit allen Arten von Eingabenamen arbeiten. und behandeln sie so, wie Sie es erwarten würden.

Zum Beispiel:

<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

Verwendungszweck

$('#my-form').serializeObject();

Die Zauberei (JavaScript)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            Push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "Push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.Push_counter = function(key){
            if(Push_counters[key] === undefined){
                Push_counters[key] = 0;
            }
            return Push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // Push
                if(k.match(patterns.Push)){
                    merge = self.build([], self.Push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);
427
maček

Was ist falsch mit: 

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 
266
mkschreder

Eine feste Version der Lösung von Tobias Cohen. Dieser verarbeitet korrekt falsche Werte wie 0 und ''

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].Push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].Push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

Und eine CoffeeScript-Version für Ihre Kodierung:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].Push
        objectData[@name] = [objectData[@name]]

      objectData[@name].Push value
    else
      objectData[@name] = value

  return objectData
101
Daniel X Moore

Ich mag Array.prototype.reduce, weil es ein Einzeiler ist und nicht auf Underscore.js oder dergleichen angewiesen ist:

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

Dies ist ähnlich wie bei der Verwendung von Array.prototype.map, aber Sie müssen Ihren Gültigkeitsbereich nicht mit einer zusätzlichen Objektvariablen verstopfen. One-Stop-Shopping.

WICHTIG HINWEIS: Formulare mit Eingaben, die name-Attribute doppelt enthalten, sind gültiger HTML-Code und sind ein allgemeiner Ansatz. Die Verwendung einer der Antworten in diesem Thread ist in diesem Fall ungeeignet (da Objektschlüssel eindeutig sein müssen).

53
Ethan Brown

Alle diese Antworten schienen mir so übertrieben. Zur Vereinfachung gibt es etwas zu sagen. Solange alle Formulareingaben das Attribut name gesetzt haben, sollte dies nur bei Jim Dandy funktionieren.

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});
30

Wenn Sie Underscore.js verwenden, können Sie die relativ kurze Beschreibung verwenden:

_.object(_.map($('#myform').serializeArray(), _.values))
24
olleicua

Es gibt wirklich keine Möglichkeit, dies zu tun, ohne jedes Element zu untersuchen. Was Sie wirklich wissen möchten, ist "Hat jemand anderes bereits eine Methode geschrieben, die ein Formular in ein JSON-Objekt konvertiert?" Etwas wie das folgende sollte funktionieren - beachten Sie, dass Sie nur die Formularelemente erhalten, die über einen POST zurückgegeben werden (muss einen Namen haben). Dies ist nicht getestet .

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}
21
tvanfosson

Ok, ich weiß, dass dies bereits eine hoch gelobte Antwort hat, aber eine andere ähnliche Frage wurde gestellt vor kurzem, und ich wurde auch auf diese Frage verwiesen. Ich möchte meine Lösung auch anbieten, da 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 von der andere SO Frage :

Ursprünglich verwendeten wir die Methode serializeArray() von jQuery, dies schließt jedoch keine deaktivierten Formularelemente ein. Wir deaktivieren häufig Formularelemente, die mit anderen Quellen auf der Seite "synchronisiert" werden, müssen die Daten jedoch weiterhin in unser serialisiertes Objekt aufnehmen. Also ist serializeArray() raus. 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);

Beachten Sie, dass dazu jede Ihrer Eingaben ein name -Attribut benötigt, bei dem es sich um den Namen der Eigenschaft des resultierenden Objekts handelt.

Das ist tatsächlich leicht verändert von dem, was wir verwendet haben. Wir mussten ein Objekt erstellen, das als .NET IDictionary strukturiert war. Daher 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);

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

17
Samuel Meacham

Diese Funktion sollte mehrdimensionale Arrays zusammen mit mehreren Elementen mit demselben Namen behandeln. 

Ich benutze es 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;
};
16
Sergey Varlamov

Du kannst das:

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

Siehe JSON.

15
Harini Sekar

Bei allen gegebenen Antworten gibt es ein Problem, welches ...

Wenn der Name als Array wie name[key] eingegeben wird, wird er wie folgt generiert

 name:{
   key : value
 }

Zum Beispiel :  Wenn ich eine solche 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 mit allen angegebenen Antworten generieren.

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

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

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

Dann versuchen Sie diesen Code unter js.

(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>

14
Bhavik Hirani

Benutzen:

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"}
12
Adrian Seeley

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

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

Was es macht?

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

geeignet für progressive Web-Apps (man kann sowohl reguläre Formularsendeaktionen als auch Ajax-Anfragen problemlos unterstützen)

11
test30

Einfachheit ist hier am besten. Ich habe eine einfache Zeichenfolge durch einen regulären Ausdruck ersetzt, und sie funktionierten bisher wie ein Zauber. Ich bin kein Experte für reguläre Ausdrücke, aber ich wette, Sie können sogar sehr komplexe Objekte füllen.

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});
7
ngr

Aus einigen älteren Antworten:

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

Mit der Lösung von maček habe ich sie so geändert, dass sie mit der Art und Weise arbeitet, wie ASP.NET MVC ihre verschachtelten/komplexen Objekte in demselben Formular verarbeitet. Alles, was Sie tun müssen, ist, den Validierungsartikel dahingehend zu ändern:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

Dies wird übereinstimmen und dann Elemente mit folgenden Namen korrekt zuordnen:

<input type="text" name="zooName" />

Und

<input type="text" name="zooAnimals[0].name" />
6
G-Ram

der einfachste und genaueste Weg, den ich für dieses Problem gefunden habe, war die Verwendung von bbq plugin oder dieses one (was etwa 0,5 KB groß ist).

es funktioniert auch mit mehrdimensionalen Arrays.

$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};

5
Roey

Ich habe ein Problem mit Tobias Cohens Code gefunden (ich habe nicht genug Punkte, um direkt dazu Stellung zu nehmen), was ansonsten für mich funktioniert. Wenn Sie zwei Auswahloptionen mit demselben Namen haben, beide mit Wert = "", wird im ursprünglichen Code "name": "" anstelle von "name" angezeigt: ["", ""]

Ich denke, das kann behoben werden, indem "|| o [this.name] == ''" zur ersten if-Bedingung hinzugefügt wird:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            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;
};
5
user1134789

Es gibt ein Plugin, das genau das für jQuery, jquery.serializeJSON macht. Ich habe es jetzt bei einigen Projekten erfolgreich eingesetzt. Es wirkt wie ein Zauber. 

4

Ich habe ein Formular für ein mehrdimensionales JavaScript-Objekt selbst codiert, um es in der Produktion zu verwenden. Das Ergebnis ist https://github.com/serbanghita/formToObject.js .

3
Șerban Ghiță

Verwandeln Sie alles in ein Objekt (nicht getestet)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.Push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

Die Ausgabe des Tests:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

auf

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

wird nachgeben:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }
3
eithed

Ich hatte das gleiche Problem in letzter Zeit und kam mit diesem .toJSON-jQuery-Plugin heraus, das ein Formular in ein JSON-Objekt mit der gleichen Struktur konvertiert. Dies ist besonders nützlich für dynamisch generierte Formulare, in denen Sie Ihrem Benutzer die Möglichkeit geben möchten, an bestimmten Stellen weitere Felder hinzuzufügen.

Der Punkt ist, dass Sie ein Formular tatsächlich so erstellen möchten, dass es selbst über eine Struktur verfügt. Nehmen wir an, Sie möchten ein Formular erstellen, in das der Benutzer seine Lieblingsorte in der Stadt einfügt: Sie können sich vorstellen, dass dieses Formular ein <places>...</places>-XML-Element darstellt eine Liste von Orten, die der Benutzer mag, also eine Liste von <place>...</place>-Elementen, von denen jedes beispielsweise ein <name>...</name>-Element, ein <type>...</type>-Element und dann eine Liste von <activity>...</activity>-Elementen enthält, um die Aktivitäten darzustellen, die Sie an einem solchen Ort ausführen können. Ihre XML-Struktur wäre also so:

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

Wie cool wäre es, wenn Sie ein JSON-Objekt haben, das genau diese Struktur darstellt, so können Sie entweder:

  • Speichern Sie dieses Objekt, wie es ist, in einer beliebigen CouchDB - ähnlichen Datenbank
  • Lesen Sie es von Ihrem $ _POST [] -Server und rufen Sie ein korrekt verschachteltes Array auf, das Sie semantisch bearbeiten können
  • Verwenden Sie ein serverseitiges Skript, um es in eine wohlgeformte XML-Datei zu konvertieren (auch wenn Sie dessen genaue Struktur nicht kennen).
  • Verwenden Sie es einfach so, wie es in jedem Node.js - ähnlichen Serverskript ist

OK, also müssen wir uns jetzt überlegen, wie ein Formular eine XML-Datei darstellen kann.

Natürlich ist das <form>-Tag die root, aber dann haben wir das <place>-Element, das ein Container und nicht ein Datenelement selbst ist. Daher können wir kein Eingabe-Tag dafür verwenden.

Hier kommt der <fieldset>-Tag zum Tragen! Wir verwenden <fieldset>-Tags, um alle Containerelemente in unserer Formular-/XML-Darstellung darzustellen und so zu einem Ergebnis wie diesem zu gelangen:

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

Wie Sie in diesem Formular sehen können, brechen wir die Regel der eindeutigen Namen. Dies ist jedoch in Ordnung, da sie in ein Array von Elementen konvertiert werden und somit nur von ihrem Index innerhalb des Arrays referenziert wird.

An dieser Stelle können Sie sehen, dass es keinen name="array[]"-ähnlichen Namen im Formular gibt und alles ist hübsch, einfach und semantisch.

Jetzt möchten wir, dass dieses Formular in ein JSON-Objekt konvertiert wird, das folgendermaßen aussehen wird:

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

Zu diesem Zweck habe ich dieses jQuery-Plugin hier entwickelt, mit dem jemand zur Optimierung von diesem Code Review-Thread beigetragen hat und es sieht so aus:

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].Push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

Ich habe auch diesen einen Blogbeitrag gemacht, um dies mehr zu erklären.

Dies konvertiert alles in einem Formular in JSON (sogar Radio und Kontrollkästchen) und Sie müssen nur noch anrufen

$.post('script.php',('form').toJSO(), ...);

Ich weiß, dass es viele Möglichkeiten gibt, Formulare in JSON-Objekte umzuwandeln. Sicherlich funktionieren .serialize() und .serializeArray() in den meisten Fällen hervorragend und sind vor allem für die Verwendung gedacht, aber ich denke, diese ganze Idee von das Schreiben eines Formulars als XML-Struktur mit sinnvollen Namen und es in ein wohlgeformtes JSON-Objekt umzuwandeln ist den Versuch wert, auch die Tatsache, dass Sie Eingabe-Tags mit demselben Namen hinzufügen können, ist sehr nützlich, wenn Sie dynamisch generierte Formulardaten abrufen möchten.

Ich hoffe das hilft jemandem!

3
Onheiron

Ich habe ein Problem mit der ausgewählten Lösung gefunden.

Bei der Verwendung von Formularen mit Array-basierten Namen stirbt die jQuery serializeArray () - Funktion tatsächlich.

Ich habe ein PHP - Framework, das Array-basierte Feldnamen verwendet, damit dasselbe Formular in mehreren Ansichten mehrmals auf dieselbe Seite gestellt werden kann. Dies kann praktisch sein, um sowohl das Hinzufügen, Bearbeiten und Löschen auf derselben Seite zu platzieren, ohne dass Formularmodelle in Konflikt stehen.

Da ich die Formulare seralisieren wollte, ohne diese absolute Basisfunktionalität herausnehmen zu müssen, entschied ich mich, mein eigenes seralizeArray () zu schreiben:

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

Bitte beachten Sie: Dies funktioniert auch außerhalb des Formulars submit (). Wenn im Rest Ihres Codes ein Fehler auftritt, wird das Formular nicht gesendet, wenn Sie auf einen Link-Button mit dem Hinweis "Änderungen speichern" klicken.

Beachten Sie auch, dass diese Funktion niemals zur Überprüfung des Formulars verwendet werden darf, sondern nur zum Sammeln der Daten, die zur Validierung an den Server gesendet werden. Die Verwendung eines solchen schwachen und massenmäßig zugewiesenen Codes verursacht WILL XSS usw.

3
Sammaye

Ich bevorzuge diesen Ansatz, weil: Sie müssen nicht über zwei Sammlungen iterieren, Sie können andere Dinge als "Name" und "Wert" erhalten, wenn Sie müssen, und Sie können Ihre Werte bereinigen, bevor Sie sie im Objekt speichern ( Wenn Sie Standardwerte haben, die Sie nicht speichern möchten, z.

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].Push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

Verwenden Sie wie folgt:

var obj = $.formObject($("#someForm"));

Nur in Firefox getestet.

3
kflorence

mit lodash # set

let serialized = [
  { key: 'data[model][id]', value: 1 },
  { key: 'data[model][name]', value: 'product' },
  { key: 'sid', value: 'dh0un1hr4d' }
];

serialized.reduce(function(res, item) {
  _.set(res, item.key, item.value);
  return res;
}, {});

// returns
{
  "data": {
    "model": {
      "id": 1,
      "name": "product"
    }
  },
  "sid": "dh0un1hr4d"
}
2
Ivan Nosov

Ich mag die Samuels-Version, aber ich glaube, es hat einen kleinen Fehler. Normalerweise wird JSON als gesendet

{"coreSKU": "PCGUYJS", "name_de": "was auch immer", ...

Nicht so wie

[{"coreSKU": "PCGUYJS"}, {"name_de": "was auch immer"}, ...

die Funktion IMO sollte also lauten:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

und um es in ein Datenarray zu packen (wie auch allgemein erwartet), und es schließlich als String zu senden.

Für das Stringify siehe Frage 3593046 für die schlanke Version unter json2.js für die Eventuality-Version. Das sollte alles abdecken :)

2
Frank Nocke

Verwenden Sie für eine schnelle, moderne Lösung das Plugin JSONify jQuery. Das folgende Beispiel stammt wortwörtlich aus der GitHub README. Alles Gute an Kushal Pandya, Autor des Plugins.

Gegeben:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

Laufen:

$('#myform').jsonify();

Produziert:

{"name":"Joe User","email":"[email protected]","password":"mypass"}

Wenn Sie mit diesem JSON-Objekt eine jQuery POST durchführen möchten:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}
2
Jim Stewart

Noch eine Antwort

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})
<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData

2
test30

Ich würde dies nicht auf einer Live-Site verwenden, da XSS-Angriffe und wahrscheinlich auch viele andere Probleme vorliegen.

$("#myform").submit(function(){
    var arr = $(this).serializeArray();
    var json = "";
    jQuery.each(arr, function(){
        jQuery.each(this, function(i, val){
            if (i=="name") {
                json += '"' + val + '":';
            } else if (i=="value") {
                json += '"' + val.replace(/"/g, '\\"') + '",';
            }
        });
    });
    json = "{" + json.substring(0, json.length - 1) + "}";
    // do something with json
    return false;
});
1
Jason Berry

Wenn Sie ein Formular mit JSON senden, müssen Sie [] beim Senden der Zeichenfolge entfernen. Sie können dies mit der jQuery-Funktion serializeObject () tun:

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

$.fn.serializeObject = function() {
    var o = {};
    //var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else
            elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(elemValue || '');
        }
        else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}
1
Harini Sekar

Wenn Sie ein Formular in ein Javascript-Objekt konvertieren möchten, ist die derzeit einfachste Lösung die Verwendung der jQuery-Funktionsmethoden each und serializeArray.

$.fn.serializeObject = function() {

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

  return form;
};

Plugin gehostet auf GitHub:
https://github.com/tfmontague/form-object/blob/master/README.md

Kann mit Bower installiert werden:
bower install git://github.com/tfmontague/form-object.git

1
tfmontague

Also habe ich die akzeptierte Antwort verwendet und einen großen Fehler gefunden.
Es unterstützt keine Eingabearrays wie: 

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

Diese geringfügige Änderung sollte Folgendes beheben: 

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;
}

Denken Sie daran, die Ausgabe von $(this).serializeArray(); zu übergeben, sonst funktioniert es nicht.

1
Folkmann

Die obige Lösung von Tobias ist die richtige, jedoch, wie Kommentator @macek hervorhebt, werden Eingaben des Typs foo [bar] nicht verarbeitet und in Unterobjekte aufgeteilt.

Dies ist eine reine PHP-Funktion, aber ich finde es immer noch sehr nützlich, dieselbe Struktur in JavaScript erzeugen zu können.

Ich habe einfach Tobias 'Code oben modifiziert, so dass ihm alle Ehre zuteil wird. Dies kann wahrscheinlich sauberer gemacht werden, aber ich habe es in nur fünf Minuten aufgezogen und dachte, es könnte nützlich sein.

Zu diesem Zeitpunkt werden keine mehrdimensionalen oder numerisch indizierten Arrays verarbeitet. Das heißt, es funktioniert nur mit den Namen foo [bar] und nicht mit foo [].

jQuery.fn.serializeObjectPHP = function()
{
    var o = {};
    var re = /^(.+)\[(.*)\]$/;
    var a = this.serializeArray();
    var n;
    jQuery.each(a, function() {
        var name = this.name;
        if ((n = re.exec(this.name)) && n[2]) {
            if (o[n[1]] === undefined) {
                o[n[1]] = {};
                o[n[1]][n[2]] = this.value || '';
            } else if (o[n[1]][n[2]] === undefined) {
                o[n[1]][n[2]] = this.value || '';
            } else {
                if(!o[n[1]][n[2]].Push) {
                    o[n[1]][n[2]] = [ o[n[1]][n[2]] ];
                }
                o[n[1]][n[2]].Push(this.value || '');
            }
        } else {
            if (n && !n[2]) {
                name = n[1];
            }
            if (o[name] !== undefined) {
                if (!o[name].Push) {
                    o[name] = [o[name]];
                }
                o[name].Push(this.value || '');
            } else {
                o[name] = this.value || '';
            }
        }
    });
    return o;
};
0
Kevin Jhangiani

Eine modernere Methode ist es, mit serializeArray() auf diese Art und Weise zu reduzieren:

$('#formid').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});

In vielen "normalen" Fällen hilft es.

Für die sehr häufige Instanz, in der mehrere Tags mit doppelten name-Attributen vorhanden sind, reicht dies nicht aus.

Da Eingaben mit doppelten name-Attributen normalerweise in einem 'Wrapper' (div, ul, tr, ...) enthalten sind, wie in diesem Beispiel:

  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>
  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>

man kann mit dem Operator map verkleinern, um darauf zu iterieren:

$(".wrapperClass").map(function () {
  return $(this).find('*').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
}).get();

Das Ergebnis ist ein Array von Objekten im Format:

  [
    {
      one: valueOfOne,
      two: valueOfTwo
    }, {
      one: valueOfOne,
      two: valueOfTwo
    }
  ]

Der Operator .get() wird in Verbindung mit map verwendet, um das Basisarray anstelle des jQuery-Objekts abzurufen, wodurch ein saubereres Ergebnis erzielt wird. jQuery-Dokumente

0
user3658510

Diese Lösung ist besser. Einige der beliebtesten Optionen hier korrigieren die Kontrollkästchen für Kontrollkästchen nicht, wenn das Kontrollkästchen nicht aktiviert ist.

       getData: function(element){
      //@todo may need additional logic for radio buttons
      var select = $(element).find('select');
      var input = $(element).find('input');
      var inputs = $.merge(select,input);
      var data = {};
      //console.log(input,'input');
      $.each(inputs,function(){
        if($(this).attr('type') != undefined){
          switch($(this).attr('type')){
            case 'checkbox':
              data[$(this).attr('name')] = ( ($(this).attr('checked') == 'checked') ? $(this).val():0 );
              break;
            default:
              data[$(this).attr('name')] = $(this).val();
              break;
          }
        }
        else{
          data[$(this).attr('name')] = $(this).val();
        }
      })
      return data;
   }
0
cnizzardini

Mein Code aus meiner Bibliothek phery hat eine Serialisierungsroutine erhalten, die mit wirklich komplexen Formularen umgehen kann (wie in der Demo https://github.com/pocesar/phery/blob/master/demo.php#L1664 ), und es ist keine Einheitsgröße. Tatsächlich wird geprüft, um welche Art von Feld es sich handelt. Ein Optionsfeld ist beispielsweise nicht dasselbe wie ein Bereich, das nicht mit keygen identisch ist und nicht mit dem Auswählen von mehreren identisch ist. Meine Funktion deckt alles ab und Sie können es sehenit unter https://github.com/pocesar/phery/blob/master/phery.js#L1851 .

serializeForm:function (opt) {
    opt = $.extend({}, opt);

    if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
        opt['disabled'] = false;
    }
    if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
        opt['all'] = false;
    }
    if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
        opt['empty'] = true;
    }

    var
        $form = $(this),
        result = {},
        formValues =
            $form
                .find('input,textarea,select,keygen')
                .filter(function () {
                    var ret = true;
                    if (!opt['disabled']) {
                        ret = !this.disabled;
                    }
                    return ret && $.trim(this.name);
                })
                .map(function () {
                    var
                        $this = $(this),
                        radios,
                        options,
                        value = null;

                    if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
                        if ($this.is('[type="radio"]')) {
                            radios = $form.find('[type="radio"][name="' + this.name + '"]');
                            if (radios.filter('[checked]').size()) {
                                value = radios.filter('[checked]').val();
                            }
                        } else if ($this.prop('checked')) {
                            value = $this.is('[value]') ? $this.val() : 1;
                        }
                    } else if ($this.is('select')) {
                        options = $this.find('option').filter(':selected');
                        if ($this.prop('multiple')) {
                            value = options.map(function () {
                                return this.value || this.innerHTML;
                            }).get();
                        } else {
                            value = options.val();
                        }
                    } else {
                        value = $this.val();
                    }

                    return {
                        'name':this.name || null,
                        'value':value
                    };
                }).get();

    if (formValues) {
        var
            i,
            value,
            name,
            $matches,
            len,
            offset,
            j,
            fields;

        for (i = 0; i < formValues.length; i++) {
            name = formValues[i].name;
            value = formValues[i].value;

            if (!opt['all']) {
                if (value === null) {
                    continue;
                }
            } else {
                if (value === null) {
                    value = '';
                }
            }

            if (value === '' && !opt['empty']) {
                continue;
            }

            if (!name) {
                continue;
            }

            $matches = name.split(/\[/);

            len = $matches.length;

            for (j = 1; j < len; j++) {
                $matches[j] = $matches[j].replace(/\]/g, '');
            }

            fields = [];

            for (j = 0; j < len; j++) {
                if ($matches[j] || j < len - 1) {
                    fields.Push($matches[j].replace("'", ''));
                }
            }

            if ($matches[len - 1] === '') {
                offset = assign_object(result, fields, [], true, false, false);

                if (value.constructor === Array) {
                    offset[0][offset[1]].concat(value);
                } else {
                    offset[0][offset[1]].Push(value);
                }
            } else {
                assign_object(result, fields, value);
            }
        }
    }

    return result;
}

Es ist Teil meiner Bibliothek phery, kann aber in Ihr eigenes Projekt portiert werden. Es erstellt Arrays, in denen Arrays vorhanden sein sollen, und erhält die korrekten ausgewählten Optionen aus den Kontrollkästchen select, normalize, usw. Wenn Sie es in JSON (einen echten JSON-String) konvertieren möchten, machen Sie einfach JSON.stringify($('form').serializeForm());

0
pocesar
const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}
0
Stonetip

Dies ist eine Verbesserung für die Funktion von Tobias Cohen, die mit mehrdimensionalen Arrays gut funktioniert:

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

Dies ist jedoch kein jQuery-Plugin, aber es dauert nur ein paar Sekunden, um es zu einem zu machen, wenn Sie es auf diese Weise verwenden möchten: Ersetzen Sie einfach den Funktionsdeklarations-Wrapper:

function serializeFormObject(form)
{
    ...
}

mit:

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

Ich denke, dass es der Lösung von Macek ähnlich ist, da es dasselbe tut, aber ich denke, dass dies etwas sauberer und einfacher ist. Ich habe auch die Testfall-Eingaben von Macek in die Geige aufgenommen und einige zusätzliche hinzugefügt. Bisher funktioniert das gut für mich.

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;
}
0
Kipras

Ich hatte kürzlich das gleiche Problem, also entwickelte ich eine Funktion, mit der die Steuerelemente eines Formulars analysiert werden können, um die Steuer-ID/den Steuerwert zu erhalten und diese in JSON zu konvertieren.

Es ist flexibel genug, um weitere Steuerelemente hinzufügen zu können. Sie müssen lediglich den Steuerelementtyp und das Attribut angeben, das Sie als Wert interpretieren möchten.

das vollständige Skript finden Sie hier .

Der Vorteil ist, dass nur die Daten benötigt werden, die Sie tatsächlich benötigen, ohne das gesamte Objekt zu ziehen.

Der Nachteil ist, dass Sie, wenn Sie verschachtelte Optionen haben, die IDs entsprechend voranstellen müssen, damit Sie eine doppelte Option für ihre spezifische Gruppe verwenden können.

Ich hoffe das hilft!

0
Florin Mircea

Hier ist eine nicht-jQuery-Methode:

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

Sie können es so verwenden:

function() {

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

        //Make an object out of the form data: {name: value}
        var data = elements.reduce(function(data, element) {
            data[element.name] = element.value;
            return data;
        }, {});

        return data;
    };

    var post = function(action, data, callback) {
        var request = new XMLHttpRequest();
        request.onload = callback;
        request.open('post', action);
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.send(JSON.stringify(data), true);
        request.send();
    };

    var submit = function(e) {
        e.preventDefault();
        var form = e.target;
        var action = form.action;
        var data = getFormData(form);
        //change the third argument in order to do something
        //more intersting with the response than just print it
        post(action, data, console.log.bind(console));
    }

    //change formName below
    document.formName.onsubmit = submit;

})();
0
Max Heiber

Die Funktion serialize nimmt JSON-Objekt als Parameter und gibt serialize String zurück.

function serialize(object) {
            var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = {
                '\b' : '\\b',
                '\t' : '\\t',
                '\n' : '\\n',
                '\f' : '\\f',
                '\r' : '\\r',
                '"' : '\\"',
                '\\' : '\\\\'
            }, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"';
            function _char(c) {
                if (!_CHARS[c]) {
                    _CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16))
                        .slice(-4);
                }
                return _CHARS[c];
            }
            function _string(s) {
                return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE;
                // return str.replace('\"','').replace('\"','');
            }

            function serialize(h, key) {
                var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v;
                arr = value instanceof Array;
                stack.Push(value);
                keys = value;
                i = 0;
                t = typeof value;
                switch (t) {
                    case "object" :
                        if(value==null){
                            return null;
                        }
                        break;
                    case "string" :
                        return _string(value);
                    case "number" :
                        return isFinite(value) ? value + EMPTY : NULL;
                    case "boolean" :
                        return value + EMPTY;
                    case "null" :
                        return null;
                    default :
                        return undefined;
                }
                arr = value.length === undefined ? false : true;

                if (arr) { // Array
                    for (i = value.length - 1; i >= 0; --i) {
                        a[i] = serialize(value, i) || NULL;
                    }
                }
                else { // Object
                    i = 0;
                    for (k in keys) {
                        if (keys.hasOwnProperty(k)) {
                            v = serialize(value, k);
                            if (v) {
                                a[i++] = _string(k) + colon + v;
                            }
                        }
                    }
                }

                stack.pop();
                if (space && a.length) {

                    return arr
                        ? "[" + _indent(a.join(COMMA_CR), space) + "\n]"
                        : "{\n" + _indent(a.join(COMMA_CR), space) + "\n}";
                }
                else {
                    return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA)
                        + "}";
                }
            }
            return serialize({
                "" : object
            }, "");
        }
0
Anoop

Ich musste schamlos meine Formularbibliothek fördern.

transForm.js

Es macht Dinge wie: serialisieren, deserialisieren, löschen und Formulare übermitteln.

Der Grund, warum ich dies gemacht habe, ist, dass form2js/js2form nicht gepflegt wird und nicht so flexibel und schnell ist, wie ich möchte. Wir verwenden es in der Produktion, weil dies mit form2js/js2form kompatibel ist.

0
A1rPun

Ich habe ein jQuery-Modul geschrieben, jsForm , das dieses bidirektional auch für ziemlich komplizierte Formulare ausführen kann (erlaubt auch Sammlungen und andere komplexere Strukturen).

Es verwendet den Namen der Felder (sowie einige spezielle Klassen für Sammlungen) und stimmt mit einem JSON-Objekt überein. Es ermöglicht die automatische Replikation von DOM-Elementen für Sammlungen und Datenverarbeitung:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
        <script>
        $(function(){
            // Some JSON data
            var jsonData = {
                name: "TestName",   // Standard inputs
                description: "long Description\nMultiline", // Textarea
                links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}],   // Lists
                active: true,   // Checkbox
                state: "VISIBLE"    // Selects (enums)
            };

            // Initialize the form, prefix is optional and defaults to data
            $("#details").jsForm({
                data:jsonData
            });

            $("#show").click(function() {
                // Show the JSON data
                alert(JSON.stringify($("#details").jsForm("get"), null, " "));
            });
        });
        </script>
    </head>
    <body>
        <h1>Simpel Form Test</h1>
        <div id="details">
            Name: <input name="data.name"/><br/>
            <input type="checkbox" name="data.active"/> active<br/>
            <textarea name="data.description"></textarea><br/>
            <select name="data.state">
                <option value="VISIBLE">visible</option>
                <option value="IMPORTANT">important</option>
                <option value="HIDDEN">hidden</option>
            </select>
            <fieldset>
                <legend>Links</legend>
                <ul class="collection" data-field="data.links">
                    <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
                </ul>
            </fieldset>
            <button class="add" data-field="data.links">add a link</button><br/>
            Additional field: <input name="data.addedField"/>
        </div>
        <button id="show">Show Object</button>
    </body>
</html>
0
Niko