Serializar dados de formulário para JSON

Eu quero fazer alguma validação pré-servidor de um formulário em um modelo de Backbone.js . Para fazer isso, preciso obter a input do usuário de um formulário em dados utilizáveis. Eu encontrei três methods para fazer isso:

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

Infelizmente, nenhum deles oferece um bom object JSON reajustável e desenvolvível que eu exija. Eu já examinei várias questões no Stack Overflow, mas encontrei apenas algumas bibliotecas extras.

Não Underscore.js , o jQuery atual ou Backbone.js fornecem um método auxiliar?

Não consigo imaginar que não haja pedido para tal function.

HTML

        

JavaScript

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

Saídas

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

Modelo Backbone.js

 var user = new User(formData); user.save(); 

Aqui está uma function para este caso de uso:

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

Uso:

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

Você consegue fazer isso:

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


O código abaixo deve ajudá-lo. 🙂

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

Usar:

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

Eu sei que isso não atende ao requisito de function auxiliar, mas a maneira que eu fiz isso é usando o método $ .each () do jQuery

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

Então eu posso passar o loginFormObject para o meu backend, ou você pode criar um userobject e salvar () no backbone também.

Não consegui encontrar uma resposta que resolvesse isso:

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

Isso exige este object:

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

Então eu tive que escrever um serializador que resolveria isso:

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

Talvez isso ajude alguém.

Se você não se importa com elementos de formulário repetitivos com o mesmo nome, então você pode fazer:

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

Estou usando o Underscore.js aqui.

Tentando resolver o mesmo problema (validação sem entrar em plugins e bibliotecas complexas), criei jQuery.serializeJSON , que melhora o serializeArray para suportar qualquer tipo de object nested.

Este plugin ficou muito popular, mas em outro projeto eu estava usando o Backbone.js , onde eu gostaria de escrever a lógica de validação nos modelos Backbone.js. Em seguida, criei o Backbone.Formwell , que permite mostrar os erros retornados pelo método de validação diretamente no formulário.

Se você estiver enviando o formulário com JSON, deverá remover [] na string de envio. Você pode fazer isso com a function 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; } 

Usando Underscore.js :

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

Aqui está o que eu uso para esta situação como um módulo (no meu 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; }); 

É uma droga que não consigo encontrar outra maneira de fazer o que quero fazer.

Isso retorna este JSON para mim:

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

Usando jQuery e evitando serializeArray , o código a seguir serializa e envia os dados do formulário no formato 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(); }); 

Minha contribuição:

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

Bem, aqui está um plugin prático para isso: https://github.com/macek/jquery-serialize-object

A questão para isso é:

Seguindo em frente, na parte superior da serialização do núcleo, .serializeObject suportará a serialização correta para valores booleanos e numéricos, resultando em tipos válidos para ambos os casos.

Ansiosos por estes em> = 2.1.0

Encontrou um ajudante possível:

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

e para pessoas que não querem entrar em contato com formulários: https://github.com/powmedia/backbone-forms

Vou dar uma olhada no primeiro link e dar um feedback 🙂