Sérialiser les données de formulaire en JSON [dupliquer]

Voici une fonction pour ce cas d'utilisation:

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

Utilisation:

var $form = $("#form_data");
var data = getFormData($form);

Vous pouvez faire ceci:

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>

voir: http://www.json.org/js.html

Le code ci-dessous devrait vous aider. :)

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

utiliser:

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

je sais que cela ne répond pas à l'exigence de la fonction helper, mais la façon dont je l'ai fait est d'utiliser le $de jQuery.chaque méthode () 151920920"

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

alors je peux passer loginFormObject à mon arrière-plan, ou vous pouvez créer un userobject et enregistrer() dans backbone ainsi.

Je n'ai pas trouvé de réponse qui pourrait résoudre ceci:

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

Ce appels pour cet objet:

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

donc j'ai dû écrire un sérialiseur de mon propre qui résoudrait cela:

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

Peut-être que ça aidera quelqu'un.

si vous ne vous souciez pas des éléments de forme répétitifs avec le même nom, alors vous pouvez faire:

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

j'utilise Underscore.js ici.

en essayant de résoudre le même problème (validation sans entrer dans les plugins et bibliothèques complexes), j'ai créé jQuery.serializeJSON , qui améliore serializeArray pour soutenir tout type d'objets imbriqués.

ce plugin est devenu très populaire, mais dans un autre projet j'ai utilisé colonne vertébrale.js , où je voudrais écrire la logique de validation dans la colonne vertébrale.js modèles. Puis j'ai créé colonne vertébrale.Formwell , qui vous permet d'afficher les erreurs renvoyées par la méthode de validation directement dans le formulaire.

si vous envoyez le formulaire avec JSON, vous devez supprimer [] dans la chaîne d'envoi. Vous pouvez le faire avec la fonction 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;
}

voici ce que j'utilise pour cette situation en tant que module (dans mon 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;
});

ça craint que je ne trouve pas d'autre moyen de faire ce que je veux.

Ce n'retour JSON pour moi:

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

Utilisant Underscore.js :

function serializeForm($form){
    return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}

en utilisant jQuery et en évitant serializeArray , le code suivant sérialise et envoie les données du formulaire dans le format 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();
});

ma contribution:

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

Eh bien, voici un plugin pratique pour cela: https://github.com/macek/jquery-serialize-object

La question pour lui est:

aller de l'avant, sur le dessus de la base de sérialisation, .serializeObject supportera serializaton correct pour les valeurs booléennes et numériques, résultant des types valides pour les deux cas.

se réjouissent de ces dans > = 2.1.0

trouvé un assistant possible:

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

et pour les personnes qui ne veulent pas entrer en contact avec des formulaires: https://github.com/powmedia/backbone-forms

je vais regarder de plus près le premier lien et de donner de la rétroaction :)