Sérialiser les données de formulaire en JSON

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

Tu peux le faire:

 function onSubmit( form ){ var data = JSON.ssortingngify( $(form).serializeArray() ); // <----------- console.log( data ); return false; //don't submit } 

  
 
 
 Try  

Le code ci-dessous devrait vous aider. 🙂

  //The function is based on http://css-sortingcks.com/snippets/jquery/serialize-form-to-json/   

Utilisation:

 var config = {}; jQuery(form).serializeArray().map(function(item) { if ( config[item.name] ) { if ( typeof(config[item.name]) === "ssortingng" ) { 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 d’assistance, mais comme je l’ai fait, la méthode $ .each () de jQuery est utilisée

 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 object utilisateur et l’enregistrer également dans backbone.

Je n’ai pas trouvé de réponse qui résoudrait ce problème:

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

Ceci appelle cet object:

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

J’ai donc dû écrire un sérialiseur qui résoudrait ce problème:

 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 cela aidera quelqu’un.

Si vous ne vous souciez pas des éléments de formulaire répétitifs portant le même nom, vous pouvez le 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 des plugins et des bibliothèques complexes), j’ai créé jQuery.serializeJSON , qui améliore serializeArray pour prendre en charge tous les types d’objects nesteds.

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 , 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.ssortingngify(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; } 

Utiliser Underscore.js :

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

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.ssortingngify(data); } return FormHelper; }); 

Ça craint que je n’arrive pas à trouver une autre façon de faire ce que je veux faire.

Cela renvoie ce JSON pour moi:

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

En utilisant jQuery et en évitant serializeArray , le code suivant sérialise et envoie les données du 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.ssortingngify(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 consortingbution:

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

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

Le problème pour cela est:

En allant de l’avant, en plus de la sérialisation de base, .serializeObject prendra en charge la sérialisation correcte pour les valeurs booléennes et numériques, les types valides résultants pour les deux cas.

Réjouissez-vous de ceux 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 les formulaires du tout: https://github.com/powmedia/backbone-forms

Je vais regarder de plus près le premier lien et donner quelques commentaires 🙂