Sérialiser les données du formulaire en JSON

Question

Je souhaite effectuer une pré-validation serveur d'un formulaire dans un fichier Backbone.js modèle. Pour ce faire, je dois transformer les données saisies par l'utilisateur dans un formulaire en données utilisables. J'ai trouvé trois méthodes pour y parvenir :

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éutilisable et développable dont j'ai besoin. J'ai déjà regardé plusieurs questions sur Stack Overflow, mais je n'ai trouvé que quelques bibliothèques supplémentaires.

N'est pas Underscore.js La version actuelle de jQuery ou Backbone.js fournit-elle une méthode d'aide ?

Je ne peux pas imaginer qu'il n'y ait pas de 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();

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

Je sais que cela ne répond pas aux exigences de la fonction d'aide, mais j'ai utilisé 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 passer loginFormObject à mon backend, ou vous pouvez créer un userobject et le sauvegarder() dans le backbone également.