Преобразование данных формы в объект JavaScript с помощью jQuery

There really is no way to do this without examining each of the elements. What you really want to know is "has someone else already written a method that converts a form to a JSON object?" Something like the following should work -- note that it will only give you the form elements that would be returned via a POST (must have a name). This is not tested.

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

Я бы не стал использовать это на действующем сайте из-за XSS-атак и, вероятно, множества других проблем, но вот краткий пример того, что вы можете сделать:

$("#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;
});

Я предпочитаю этот подход, потому что: вам не нужно выполнять итерации над двумя коллекциями, вы можете получить не только "имя" и "значение", если вам это нужно, и вы можете санировать ваши значения перед тем, как сохранить их в объекте (если у вас есть значения по умолчанию, которые вы не хотите хранить, например).

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

Используйте так:

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

Проверено только в Firefox.

Хорошо, я знаю, что этот ответ уже получил очень много голосов, но недавно был задан другой аналогичный вопрос , и меня тоже направили на этот вопрос. Я также хотел бы предложить свое решение, потому что оно предлагает преимущество перед принятым решением: вы можете включать отключенные элементы формы (что иногда важно, в зависимости от того, как работает ваш пользовательский интерфейс)

Вот мой ответ от другой вопрос SO :

Первоначально мы использовали метод jQuery serializeArray () , но он не включает отключенные элементы формы. Мы часто отключаем элементы формы, которые «синхронизируются» с другими источниками на странице, но нам все равно нужно включать данные в наш сериализованный объект. Итак, serializeArray () отсутствует. Мы использовали селектор : input , чтобы получить все входные элементы (как включенные, так и отключенные) в данном контейнере, а затем $. Map () для создания нашего объекта.

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

Обратите внимание, что для того, чтобы это работало, каждому из ваших входных данных потребуется атрибут name , который будет именем свойства результирующего объекта.

Это на самом деле немного изменено по сравнению с тем, что мы использовали. Нам нужно было создать объект, который был структурирован как .NET IDictionary, поэтому мы использовали это: (я привожу его здесь на случай, если он будет полезен)

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

Мне нравятся оба этих решения, потому что они представляют собой простое использование $ .map () , и вы полностью контролируете свой селектор (то есть, какие элементы вы в конечном итоге включите в полученный объект). Кроме того, не требуется дополнительных плагинов. Обычный старый jQuery.

JavaScript / один выход лайнера jQuery - который работает над более старыми версиями также (пред ES6):

$('form').serializeArray().reduce((f,c) => {f[c['name']]=(f[c['name']])?[].concat(f[c['name']],c['value']):c['value']; return f}, {} );