Сериализация данных формы в JSON [дубликат]

This question already has an answer here:

Convert form data to JavaScript object with jQuery 47 answers

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

var input = $("#inputId").val(); var input = $("form.login").serialize(); var input = $("form.login").serializeArray();

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

Doesn & APOS; тUnderscore.jsтекущий jQuery или Backbone.js предоставляют вспомогательный метод?

Я не могу представить, что нет запроса на такую функцию.

HTML

<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user[name]" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user[pass]" value="1234" />
    <button type="submit">login</button>
</form>

JavaScript

var formData = $("form.login").serializeObject();
console.log(formData);

Outputs

{
    "name": "dev.pus",
    "pass": "1234"
}

Backbone.js model

var user = new User(formData);
user.save();
 dev.pus05 июл. 2012 г., 08:31
Мне это нужно для форм, мне просто интересно, что три фреймворка не предоставляют средство отображения форм ...
 nilgun05 июл. 2012 г., 08:26
У jQuery есть плагин для jSON:code.google.com/p/jquery-json, он не включает вспомогательный метод.
 gonatee26 мар. 2018 г., 12:17
@xdazz, может быть, они хотят {& quot; имя & quot ;: & quot; значение & quot; } вместо {& quot; имя & quot ;: & quot; input_name & quot ;, & quot; значение & quot ;: & quot; input_value & quot; }
 Alex7819111 июн. 2017 г., 23:01
О двойном знакеThis question already has an answer here:: JSON is not JavaScript object, its serialized object!
 xdazz05 июл. 2012 г., 08:30
Что не так с.serializeArray()?

Ответы на вопрос(15)

Код ниже должен помочь вам. :)

 //The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

<script>
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (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;
    };

    $(function() {
        $('form.login').on('submit', function(e) {
          e.preventDefault();

          var formData = $(this).serializeObject();
          console.log(formData);
          $('.datahere').html(formData);
        });
    });
</script>
 20 февр. 2019 г., 09:29
@AaronMatthews для загрузки файлов использует объект Blob. таким образом не будет работать
 16 мар. 2018 г., 08:55
это здорово спасибо! У кого-нибудь есть идеи относительно того, будет ли это работать с загрузкой файлов?

Я знаю, что это не соответствует требованию вспомогательной функции, но способ, которым я это сделал, - это использование метода $ .each () jQuery.

var loginForm = $('.login').serializeArray();
var loginFormObject = {};
$.each(loginForm,
    function(i, v) {
        loginFormObject[v.name] = v.value;
    });

Затем я могу передать loginFormObject в свой бэкэнд, или вы можете создать userobject и сохранить () также в backbone.

 17 мая 2016 г., 14:42
Это красиво и просто, и, кажется, идеально подходит для моих нужд прямо сейчас. Хорошая работа!
 19 окт. 2016 г., 14:05
Я пытался использовать это для себя в качестве обходного пути для других проблем, но я нашел здесь проблему. На веб-сайте, выполненном с помощью ASP.NET MVC (представление в стиле Razor), код генерирует видимый флажок ввода и скрытый ввод. Используя ваш код,loginForm содержал оба входа (если флажок был установлен,false только в остальном) иloginFormObject впоследствии получил второй вход, который всегда былfalse, Решение здесь: в подфункцииeachдобавьте следующую строку после{: if(formObject[v.name] != "true"), Это сохранитtrue.

Пытаясь решить ту же проблему (проверка без проникновения в сложные плагины и библиотеки), я создалjQuery.serializeJSON, что улучшает serializeArray для поддержки любого типа вложенных объектов.

Этот плагин стал очень популярным, но в другом проекте я использовалBackbone.js, где я хотел бы написать логику проверки в моделях Backbone.js. Тогда я создалBackbone.Formwell, что позволяет отображать ошибки, возвращаемые методом проверки непосредственно в форме.

Если вы отправляете форму с JSON, вы должны удалить [] в строке отправки. Вы можете сделать это с помощью функции jQuery serializeObject ():

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

Найден один из возможных помощников:

https://github.com/theironcook/Backbone.ModelBinder

и для людей, которые вообще не хотят связываться с формами: https://github.com/powmedia/backbone-forms

Я посмотрю по первой ссылке поближе, а потом оставлю отзыв :)

 22 апр. 2015 г., 22:06
Увидетьstackoverflow.com/questions/1184624/…: var data = {}; $ (& quot; .form-selector & quot;). serializeArray (). map (function (x) {data [x.name] = x.value;});

Вы можете сделать это:

function onSubmit( form ){
  var data = JSON.stringify( $(form).serializeArray() ); //  <-----------

  console.log( data );
  return false; //don't submit
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit='return onSubmit(this)'>
  <input name='user' placeholder='user'><br>
  <input name='password' type='password' placeholder='password'><br>
  <button type='submit'>Try</button>
</form>

видеть это:http://www.json.org/js.html

 26 апр. 2013 г., 10:19
@ dev.pus: вам может потребоваться обработать его в формате [{& quot; имя & quot;: & quot; имя пользователя & quot ;, & quot; значение & quot;: & quot; foo & quot;}]. В противном случае вы не можете обрабатывать несколько элементов с одинаковыми именами.
 01 июн. 2017 г., 09:15
Это не работает ..: 3
 23 сент. 2013 г., 05:28
если у вас не было нескольких элементов с одинаковыми именами, вы могли бы легко преобразовать данные формы в строку JSON, например: var myjson = {}; $ .each (allFormTags, function () {myjson [this.name] = this.value;});
 dev.pus05 июл. 2012 г., 08:30
Привет не совсем Я получаю что-то вроде {& quot; имя & quot ;: & quot; пользователь [имя] & quot; значение: & quot; dev.pus & quot; } но я хочу {& quot; имя & quot ;: & quot; dev.pus & quot ;, & quot; пароль & quot ;: & quot; 1234 & quot; } так далее.
 03 июл. 2014 г., 14:40
Как уже упоминалось, это даетname=foo value=boo пары вместо простоfoo=boo - ответ @Maciej Pyszy & Ski & xxx; лыжа кажется более подходящим

Я не смог найти ответ, который бы разрешил это:

[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]

Это вызывает для этого объекта:

{Vehicle: {Make: "Honda", "VIN": "123"}}

Поэтому мне пришлось написать собственный сериализатор, который бы решил эту проблему:

function(formArray){
        var obj = {};
        $.each(formArray, function(i, pair){
            var cObj = obj, pObj, cpName;
            $.each(pair.name.split("."), function(i, pName){
                pObj = cObj;
                cpName = pName;
                cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
            });
            pObj[cpName] = pair.value;
        });
        return obj;
    }

Может быть, это кому-нибудь поможет.

 15 июн. 2015 г., 12:14
Ницца. это работает для меня.
 14 нояб. 2016 г., 21:40
Я искал такой ответ, вы сделали мой день! Большое спасибо!

Мой вклад:

function serializeToJson(serializer){
    var _string = '{';
    for(var ix in serializer)
    {
        var row = serializer[ix];
        _string += '"' + row.name + '":"' + row.value + '",';
    }
    var end =_string.length - 1;
    _string = _string.substr(0, end);
    _string += '}';
    console.log('_string: ', _string);
    return JSON.parse(_string);
}

var params = $('#frmPreguntas input').serializeArray();
params = serializeToJson(params);

Используя jQuery и избегаяserializeArrayследующий код сериализует и отправляет данные формы в формате JSON:

$("#commentsForm").submit(function(event){
    var formJqObj = $("#commentsForm");
    var formDataObj = {};
    (function(){
        formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
            var thisInput = $(this);
            formDataObj[thisInput.attr("name")] = thisInput.val();
        });
    })();
    $.ajax({
        type: "POST",
        url: YOUR_URL_HERE,
        data: JSON.stringify(formDataObj),
        contentType: "application/json"
    })
    .done(function(data, textStatus, jqXHR){
        console.log("Ajax completed: " + data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        console.log("Ajax problem: " + textStatus + ". " + errorThrown);
    });
    event.preventDefault();
});

Ну, вот удобный плагин для этого:https://github.com/macek/jquery-serialize-object

Вопрос для этого:

Moving ahead, on top of core serialization, .serializeObject will support correct serializaton for boolean and number values, resulting valid types for both cases.

Look forward to these in >= 2.1.0

Использование:

var config = {};
jQuery(form).serializeArray().map(function(item) {
    if ( config[item.name] ) {
        if ( typeof(config[item.name]) === "string" ) {
            config[item.name] = [config[item.name]];
        }
        config[item.name].push(item.value);
    } else {
        config[item.name] = item.value;
    }
});
 09 июл. 2015 г., 18:24
последнее значение является стандартным способом и очень полезно для перезаписи предыдущих значений.
 30 мар. 2015 г., 11:15
действительно, адаптировал ответ - спасибо
 20 мар. 2015 г., 20:39
Это не общее решение; форма может иметь несколько значений для одного и того же ключа. Эта функция сохранит только последнее значение.

Вот что я использую для этой ситуации в качестве модуля (в моем formhelper.js):

define(function(){
    FormHelper = {};

    FormHelper.parseForm = function($form){
        var serialized = $form.serializeArray();
        var s = '';
        var data = {};
        for(s in serialized){
            data[serialized[s]['name']] = serialized[s]['value']
        }
        return JSON.stringify(data);
    }

    return FormHelper;
});

Это вроде отстой, что я не могу найти другой способ сделать то, что я хочу сделать.

Это возвращает этот JSON для меня:

{"first_name":"John","last_name":"Smith","age":"30"}

Вот функция для этого варианта использования:

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

Использование:

var $form = $("#form_data");
var data = getFormData($form);
 05 июн. 2015 г., 02:19
& quot; имя должно быть ВСЕГДА уникальным & quot; ... ммм ... группа флажков?
 23 мая 2013 г., 00:13
Коды перезаписывают ключи с тем же именем. Вы должны проверить, существует ли indexed_array [n ['a'; name & apos;]], преобразовать ли его в массив и добавить туда значение n ['a'; apos;]. Конечно, вам также необходимо проверить, является ли indexed_array [n [& amp; name & apos;]] уже массивом.
 04 окт. 2018 г., 19:25
@ Dani & # xEB; lCamps прав.<select multiple> с более чем одной выбранной опцией произойдет сбой.
 23 мая 2013 г., 15:20
имя должно быть ВСЕГДА уникальным (переключатели могут иметь только одно значение!), а если нет, то только последнее вхождение поля с повторным именем отправляется с запросом. Если вы хотите создать многоуровневую структуру массива, вы должны обнаружить квадратные скобки и из этой информации построить многомерные массивы. Совет: оберните первую часть имени поля скобками, например.somefield[2] => [somefield][2] и используйте eval для присвоения значенияeval('you_array_varialbe'+bracketed_field_name+'=\''+n['value']+'\'')
 16 мар. 2016 г., 17:27
Хорошо, это следует пометить как правильный ответ.

С помощьюUnderscore.js:

function serializeForm($form){
    return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}
 20 мар. 2015 г., 20:43
Это не общее решение; форма может иметь несколько значений для одного и того же ключа. Эта функция сохранит только последнее значение.

Если вам не нужны повторяющиеся элементы формы с одинаковыми именами, вы можете сделать следующее:

var data = $("form.login").serializeArray();
var formData = _.object(_.pluck(data, 'name'), _.pluck(data, 'value'));

я используюUnderscore.js Вот.

Ваш ответ на вопрос