Konwertuj formularze na JSON Jak boss

Aktualne źródło to na Githubie i Bower .

$ bower install jquery-serialize-object

Poniższy kod jest teraz przestarzały.

Poniższy kod może pracować z różnymi nazwami wejściowymi i obsługiwać je tak, jak można się tego spodziewać.

Na przykład:

<!-- 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"
          }
        }
      }
    }
  }
}

Użycie

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

Czary (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);

Co jest nie tak z:

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

Stała wersja rozwiązania Tobiasa Cohena. Ten poprawnie obsługuje wartości falsy, takie jak 0 i ''.

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

I wersja CoffeeScript dla wygody kodowania:

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

Lubię używać Array.prototype.reduce, ponieważ jest to jednolinijkowy i nie opiera się na podkreśleniu.js lub podobne:

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

Jest to podobne do odpowiedzi za pomocą Array.prototype.map, ale nie musisz zaśmiecać swojego zakresu dodatkową zmienną obiektu. Zakupy w jednym miejscu.

WAŻNA UWAGA : formularze z danymi wejściowymi, które mają zduplikowane atrybuty name są poprawnym HTML i jest w rzeczywistości powszechnym podejściem. Użycie którejkolwiek z odpowiedzi w tym wątku będzie niewłaściwe w takim przypadku (ponieważ klucze obiektów muszą być unikalne).

Wszystkie te odpowiedzi wydawały mi się przesadne. Jest coś do powiedzenia dla prostoty. Dopóki wszystkie dane wejściowe formularza mają ustawiony atrybut name, powinno to działać po prostu jim dandy.

$('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?)
});

Naprawdę nie ma sposobu, aby to zrobić bez zbadania każdego z elementów. Co naprawdę chcesz wiedzieć to " czy ktoś jeszcze napisał już metodę, która konwertuje formularz do obiektu JSON?"Coś takiego jak poniższe powinno działać-zauważ, że da Ci tylko elementy formularza, które zostaną zwrócone przez POST (musi mieć nazwę). To jest nie testowane .

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

Jeśli używasz podkreślenia.js możesz użyć stosunkowo zwięzłego:

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

Sprawdziłem, że istnieje problem ze wszystkimi innymi odpowiedziami, że jeśli nazwa wejściowa jest tablicą, np. name[key], to powinna być wygenerowana w ten sposób:

name:{ key : value }

Na przykład: Jeśli masz formularz HTML podobny do poniższego:

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

Ale powinien być wygenerowany tak jak JSON poniżej, i nie staje się obiektem jak poniżej ze wszystkimi innymi odpowiedziami. Więc jeśli ktoś chce przynieść coś takiego jak następujący JSON, spróbuj JS kod poniżej.

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

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>

Ok, wiem, że to ma już bardzo upvoted odpowiedź, ale inne podobne pytanie zostało zadane niedawno, i zostałem skierowany do tego pytania, jak również. Chciałbym zaoferować również moje rozwiązanie, ponieważ oferuje ono przewagę nad przyjętym rozwiązaniem: możesz włączyć wyłączone Elementy formularza (co jest czasami ważne, w zależności od tego, jak działa twój interfejs użytkownika) {]}

Oto moja odpowiedź z inne pytanie :

Początkowo używaliśmy jQuery serializeArray() metoda, ale nie obejmuje elementów formularza, które są wyłączone. Często wyłączamy Elementy formularza, które są "zsynchronizowane" z innymi źródłami na stronie, ale nadal musimy uwzględnić dane w naszym serializowanym obiekcie. Więc serializeArray() odpada. Użyliśmy selektora :input, Aby uzyskać wszystkie elementy wejściowe (zarówno włączone, jak i wyłączone) w danym kontenerze, a następnie $.map(), aby utworzyć nasz obiekt.

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

Zauważ, że aby to zadziałało, każdy z Twoich wejść będzie potrzebował atrybutu name, który będzie nazwą właściwość wynikowego obiektu.

To jest właściwie nieco zmodyfikowane z tego, co użyliśmy. Musieliśmy utworzyć obiekt, który miał strukturę. NET IDictionary, więc użyliśmy tego: (podaję go tutaj na wypadek, gdyby był przydatny)

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

Podobają mi się oba te rozwiązania, ponieważ są to proste zastosowania funkcji $.map(), a Ty masz pełną kontrolę nad selektorem (więc, które elementy kończysz, włączając w wynikowy obiekt). Ponadto nie jest wymagana dodatkowa wtyczka. Zwykły stary jQuery.

Ta funkcja powinna obsługiwać tablice wielowymiarowe wraz z wieloma elementami o tej samej nazwie.

Używam go od kilku lat do tej pory:

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

[Aktualizacja 2020]

Z prostym onelinerem w waniliowym js, który wykorzystuje fromEntries (Jak zawsze, Sprawdź obsługę przeglądarki):

Object.fromEntries(new FormData(form))

Możesz to zrobić:

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

Zobacz JSON.

One-liner (bez zależności innych niż jQuery), używa stałego powiązania obiektów dla funkcji wklejonych do metody map.

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

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

Nadaje się do progresywnych aplikacji internetowych (można łatwo obsługiwać zarówno zwykłą akcję przesyłania formularzy, jak i żądania ajax)

Użycie:

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

Wyjście:

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

Od jakiegoś starszego odpowiedź:

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

Znalazłem problem z kodem Tobiasa Cohena (nie mam wystarczającej ilości punktów, aby skomentować go bezpośrednio), który w przeciwnym razie działa dla mnie. Jeśli masz dwie opcje select o tej samej nazwie, obie z value="", oryginalny kod będzie produkować "name": ""zamiast " name":["",""]

Myślę, że można to naprawić dodając "/ / o[this.name] = = "" do pierwszego warunku if:

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

Prostota jest tutaj najlepsza. Użyłem prostego ciągu zastępować wyrażeniem regularnym, a one działały jak urok do tej pory. Nie jestem ekspertem od wyrażeń regularnych, ale założę się, że możesz nawet wypełniać bardzo złożone obiekty.

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

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

Używając rozwiązania Mačka , zmodyfikowałem go tak, aby działał w sposób ASP.NET MVC obsługuje zagnieżdżone / złożone obiekty w tej samej formie. Wszystko, co musisz zrobić, to zmodyfikować poprawny fragment do tego:

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

To dopasuje, a następnie poprawnie odwzoruje elementy o nazwach takich jak:

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

I

<input type="text" name="zooAnimals[0].name" />

Istnieje plugin do tego właśnie jQuery, jquery.serializeJSON. Wykorzystałem go z powodzeniem w kilku projektach. To działa jak urok.

Najprostszym i najdokładniejszym sposobem, jaki znalazłem dla tego problemu, było użycie wtyczki bbq lub tego jednego (który ma rozmiar około 0,5 K bajtów).

Działa również z tablicami wielowymiarowymi.

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

Preferuję takie podejście, ponieważ: nie musisz iterować ponad 2 kolekcjami, możesz uzyskać inne wartości niż "nazwa" i "wartość", jeśli potrzebujesz, i możesz wyczyścić swoje wartości przed zapisaniem ich w obiekcie (jeśli masz domyślne wartości, których nie chcesz przechowywać, na przykład).

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

Użyj TAK:

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

Testowane tylko w Firefoksie.

const formData = new FormData(form);

let formDataJSON = {};

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

    formDataJSON[key] = value;
}

Zamień cokolwiek w obiekt (nie testowany jednostkowo)

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

Wynik testu:

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

On

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

Daje:

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

Znalazłem problem z wybranym rozwiązaniem.

Podczas używania formularzy o nazwach opartych na tablicach funkcja jQuery serializeArray() faktycznie umiera.

Mam framework PHP, który używa nazw pól opartych na tablicach, aby umożliwić wielokrotne umieszczanie tego samego formularza na tej samej stronie w wielu widokach. Może to być przydatne, aby umieścić zarówno Dodaj, Edytuj, jak i usuń na tej samej stronie bez sprzecznych modeli formularzy.

Ponieważ chciałem seralizować formularze bez konieczności brania tego absolute base functionality out postanowiłem napisać własną seralizeArray ():

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

Uwaga: działa to również poza form submit (), więc jeśli w pozostałej części kodu pojawi się błąd, formularz nie zostanie przesłany, jeśli umieścisz na przycisku link z napisem "Zapisz zmiany".

Zauważ również, że ta funkcja nigdy nie powinna być używana do walidacji formularza tylko w celu zebrania danych do wysłania po stronie serwera w celu walidacji. Użycie tak słabego i przypisanego do masy kodu spowoduje XSS, itd.

Ostatnio miałem ten sam problem i wyszedłem z tym .wtyczka tojson jQuery, która konwertuje formularz do obiektu JSON o tej samej strukturze. Jest to również szczególnie przydatne w dynamicznie generowanych formularzach, w których użytkownik chce dodać więcej pól w określonych miejscach.

Chodzi o to, że możesz chcieć zbudować formularz tak, aby miał on samą strukturę, więc powiedzmy, że chcesz stworzyć formularz, w którym użytkownik wstawia swoje ulubione miejsca w mieście: możesz sobie wyobrazić ten formularz do reprezentowania elementu <places>...</places> XML zawierającego listę miejsc, które użytkownik lubi zatem listę elementów <place>...</place>, z których każdy zawiera na przykład element <name>...</name>, element <type>...</type>, a następnie listę elementów <activity>...</activity> do reprezentowania działań, które można wykonać w takim miejscu. Więc twoja struktura XML będzie wyglądać następująco:

<places>

    <place>

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

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

    </place>

    <place>...</place>

    <place>...</place>

</places>

Jak fajnie byłoby mieć obiekt JSON z tego, który reprezentowałby dokładnie tę strukturę, więc będziesz mógł albo: {]}

• przechowuj to obiekt jak w dowolnej CouchDB - jak w bazie danych
• odczytaj ją z serwera $_POST[] i odzyskaj poprawnie zagnieżdżoną tablicę, którą możesz semantycznie manipulować
[27]}użyj jakiegoś skryptu po stronie serwera, aby przekonwertować go do dobrze uformowanego pliku XML (nawet jeśli nie znasz jego dokładnej struktury a-priori)
• po prostu użyj go tak, jak jest w dowolnym węźle.js - podobny skrypt serwera

OK, więc teraz musimy pomyśleć, jak FORMULARZ może reprezentować XML plik.

Oczywiście znacznik <form> jest znacznikiem root, ale wtedy mamy element <place>, który jest kontenerem, a nie samym elementem danych, więc nie możemy użyć znacznika wejściowego.

Tutaj przydaje się znacznik <fieldset>! Będziemy używać znaczników <fieldset> do reprezentowania wszystkich elementów kontenera w naszej reprezentacji form/XML i tak uzyskamy wynik taki jak:

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

Jak widać w tej formie, łamiemy zasadę unikalnych nazw, ale to jest OK, bo będą konwertowane do tablicy elementów w ten sposób będą odwoływać się tylko do ich indeksu wewnątrz tablicy.

W tym momencie można zobaczyć, jak nie ma name="array[]" jak nazwa wewnątrz formy i wszystko jest ładne, proste i semantyczne.

Teraz chcemy, aby ten formularz został przekonwertowany do obiektu JSON, który będzie wyglądał tak:

{'places':{

    'place':[

        {

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

            'activity':[

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

            ]

        },

        {...},

        {...}

    ]

}}

Aby to zrobić opracowałem ten plugin jQuery tutaj który ktoś pomógł zoptymalizować w ten przegląd kodu wątek i wygląda tak:

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

Zrobiłem również ten jeden post na blogu , aby wyjaśnić to bardziej.

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

Wiem, że jest wiele sposobów na konwersję formularzy do obiektów JSON i na pewno .serialize() i .serializeArray() działają świetnie w większości przypadków i są głównie przeznaczone do użycia, ale myślę, że cała ta idea {56]}pisania formularza jako struktury XML o znaczących nazwach warto spróbować przekonwertować go na dobrze uformowany obiekt JSON , również fakt, że możesz dodawać znaczniki wejściowe o tej samej nazwie bez martwienia się, jest bardzo przydatny, jeśli chcesz odzyskać dynamicznie generowane dane formularzy.

Mam nadzieję, że to komuś pomoże!

Sam zakodowałem formularz do wielowymiarowego obiektu JavaScript, aby użyć go w produkcji. Wynik to https://github.com/serbanghita/formToObject.js .

Kolejna odpowiedź

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

Oto jedna linijka z wykorzystaniem zmniejszyć. Reduce jest funkcją, która pobiera wartość zwracaną przekazanej funkcji i przekazuje ją z powrotem do przekazanej funkcji w następnej iteracji, wraz z N-tą wartością z listy.

$('#formid').serializeArray().reduce((o,p) => ({...o, [p.name]: p.value}))

• ...o (składnia spread) wstawia wszystkie key: value pary z o
• owiń obiekt, w którym zwracamy (), aby odróżnić go od {}, że oznacza funkcję
• zawiń klucz (p.name) w []

Wykorzystanie dobroci ES6 w jednym linerze:

$("form").serializeArray().reduce((o, {name: n, value: v}) => Object.assign(o, { [n]: v }), {});