将表单数据序列化为JSON
我想在Backbone.js模型中做一个表单的预服务器validation。 要做到这一点，我需要从一个表单的用户input到可用的数据。 我发现了三种方法来做到这一点：
var input = $("#inputId").val();-
var input = $("form.login").serialize(); -
var input = $("form.login").serializeArray();
不幸的是，没有一个提供我需要的良好的可扩展和可开发的JSON对象。 我已经浏览了Stack Overflow的几个问题，但是我发现只有一些额外的库。
不是Underscore.js ，当前的jQuery或Backbone.js提供了一个辅助方法吗？
我无法想象有没有要求这样的function。
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);
输出
{ "name": "dev.pus", "pass": "1234" }
Backbone.js模型
var user = new User(formData); user.save();
这是这个用例的一个函数：
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; }
用法：
var $form = $("#form_data"); var data = getFormData($form);
你可以这样做：
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>
下面的代码应该帮助你。 🙂
//The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/ <script src="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>
使用：
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; } });
我知道这不符合助手function的要求，但我这样做的方式是使用jQuery的$ .each（）方法
var loginForm = $('.login').serializeArray(); var loginFormObject = {}; $.each(loginForm, function(i, v) { loginFormObject[v.name] = v.value; });
然后，我可以将loginFormObject传递给我的后端，也可以创build一个userobject并将其保存到主干中。
如果你不关心同名重复的表单元素，那么你可以这样做：
var data = $("form.login").serializeArray(); var formData = _.object(_.pluck(data, 'name'), _.pluck(data, 'value'));
我在这里使用Underscore.js 。
我找不到解决这个问题的答案：
[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]
这需要这个对象：
{Vehicle: {Make: "Honda", "VIN": "123"}}
所以我不得不写一个我自己的序列化器来解决这个问题：
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; }
也许这会帮助别人。
如果您使用JSON发送表单，则必须在发送string中删除[]。 你可以用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; }
使用Underscore.js ：
function serializeForm($form){ return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; })); }
这里是我作为一个模块（在我的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; });
这似乎很糟糕，我似乎无法find另一种方式去做我想做的事情。
这确实为我返回这个JSON：
{"first_name":"John","last_name":"Smith","age":"30"}
试图解决同样的问题（无需进入复杂的插件和库进行validation），我创build了jQuery.serializeJSON ，它改进了serializeArray以支持任何types的嵌套对象。
这个插件非常受欢迎，但在另一个项目中，我使用的是Backbone.js ，我想在Backbone.js模型中编写validation逻辑。 然后我创build了Backbone.Formwell ，它允许您直接在窗体中显示validation方法返回的错误。
使用jQuery并避免serializeArray ，以下代码序列化并以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(); });
我的贡献：
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);
那么，这是一个方便的插件： https ： //github.com/macek/jquery-serialize-object
这个问题是：
继续前进，在核心序列化的基础上，.serializeObject将支持布尔值和数值的正确序列化，从而得到两种情况下的有效types。
期待这些在> = 2.1.0
find一个可能的帮手：
https://github.com/theironcook/Backbone.ModelBinder
对于那些不想联系表单的人来说： https ： //github.com/powmedia/backbone-forms
我会仔细看看第一个链接，并给出一些反馈:)
