web-dev-qa-db-fra.com

Sérialiser les données de formulaire en JSON

Je veux faire une pré-serveur-validation d'un formulaire dans un modèle Backbone.js . Pour ce faire, je dois obtenir la saisie de l'utilisateur d'un formulaire en données utilisables. J'ai trouvé trois méthodes pour le faire:

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

Malheureusement, aucun d’entre eux ne fournit un bon objet JSON réactif et développable dont j’ai besoin. J'ai déjà parcouru plusieurs questions sur Stack Overflow, mais je n'ai trouvé que quelques bibliothèques supplémentaires.

nderscore.js , le jQuery ou le Backbone.js actuel ne fournit-il pas une méthode d'assistance?

Je ne peux pas imaginer qu'il n'y ait aucune demande pour une telle fonction.

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

Sorties 

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

Modèle Backbone.js 

var user = new User(formData);
user.save();
jquerybackbone.jsunderscore.js
186
dev.pus

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

Usage:

var $form = $("#form_data");
var data = getFormData($form);
187
Maciej Pyszyński

Tu peux le faire:

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 ceci: http://www.json.org/js.html

123
Mohammad Adil

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

Utilisation:

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

Je sais que cela ne répond pas aux exigences de la fonction d'aide, mais la façon dont j'ai fait cela est d'utiliser la méthode $ .each () de jQuery

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

Ensuite, je peux transmettre loginFormObject à mon backend, ou vous pouvez créer un objet utilisateur et le sauvegarder () également dans le réseau principal.

26
ryanday

Je ne pouvais pas trouver une réponse qui résoudrait ceci:

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

Cela appelle pour cet objet:

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

J'ai donc dû écrire mon propre sérialiseur qui résoudrait ceci:

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

Cela aidera peut-être quelqu'un.

10
user3664916

Si vous ne vous souciez pas des éléments de formulaire répétitifs portant le même nom, vous pouvez alors:

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

J'utilise nderscore.js ici.

9
Mitar

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

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

8
tothemario

Utilisation de nderscore.js :

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

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

C'est un peu dommage que je n'arrive pas à trouver un autre moyen de faire ce que je veux faire.

Cela me renvoie ce JSON:

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

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

En utilisant jQuery et en évitant serializeArray, le code suivant sérialise et envoie les données de formulaire au 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();
});
3
rbarriuso

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

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

Le problème est:

Pour aller de l'avant, en plus de la sérialisation principale, .serializeObject prendra en charge la sérialisation correcte pour les valeurs booléennes et numériques, générant ainsi des types valides pour les deux cas.

Attendez-vous à ceux-ci dans> = 2.1.0

1
Yaxing