blocks|key|3086992|text|您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3086993|​|3086994|function+onSubmit(+form+){
++var+data+=+JSON.stringify(+$(form).serializeArray()+);+//++<-----------

++console.log(+data+);
++return+false;+//don't+submit
}|code-block|syntax|javascript|3086995|<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'> 
++<input+name='password'+type='password'+placeholder='password'> 
++<button+type='submit'>Try</button>
</form>|3086996|3086997|看看这个：http://www.json.org/js.html|offset|length|3086998|entityMap|0|LINK|mutability|MUTABLE|url|http://www.json.org/js.html^0|0|0|0|0|0|5|R|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

You can do this: 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function onSubmit( form ){
 var data = JSON.stringify( $(form).serializeArray() ); // &lt;-----------

 console.log( data );
 return false; //don't submit
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;form onsubmit='return onSubmit(this)'&gt;
 &lt;input name='user' placeholder='user'&gt;&lt;br&gt;
 &lt;input name='password' type='password' placeholder='password'&gt;&lt;br&gt;
 &lt;button type='submit'&gt;Try&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>


see this: <a href="http://www.json.org/js.html" rel="noreferrer">http://www.json.org/js.html</a>

blocks|key|2873154|text|下面是这个用例的一个函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2873155|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;
}|code-block|syntax|javascript|2873156|用法：|2873157|var+$form+=+$("#form_data");
var+data+=+getFormData($form);|2873158|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here's a function for this use case:

<pre><code>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;
}
</code></pre>

Usage:

<pre><code>var $form = $("#form_data");
var data = getFormData($form);
</code></pre>

blocks|key|3087020|text|找到一个可能的助手：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3087021|https://github.com/theironcook/Backbone.ModelBinder|offset|length|3087022|对于那些根本不想接触表单的人：https://github.com/powmedia/backbone-forms|3087023|我将仔细查看第一个链接，然后给出一些反馈:)|3087024|entityMap|0|LINK|mutability|MUTABLE|url|1|https://github.com/powmedia/backbone-forms^0|0|0|1F|0|0|F|16|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|R]]]]

Found one possible helper:

<a href="https://github.com/theironcook/Backbone.ModelBinder" rel="nofollow">https://github.com/theironcook/Backbone.ModelBinder</a>

and for people who don't want to get in contact with forms at all:
<a href="https://github.com/powmedia/backbone-forms" rel="nofollow">https://github.com/powmedia/backbone-forms</a>

I will take a closer look at the first link and than give some feedback :)

blocks|key|222379|text|如果使用JSON发送表单，则必须删除发送字符串中的[]。您可以使用jQuery函数serializeObject()来执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222380|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="'+%2B+this.name.replace(/\[/g,+'\[').replace(/\]/g,+'\]')+%2B+'"]');
++++++++++++if+($chb+!=+null)+{
++++++++++++++++if+($chb.prop('checked'))+return;
++++++++++++}
++++++++}
++++++++if+(this.name+===+null+%7C%7C+this.name+===+undefined+%7C%7C+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+%7C%7C+'');
++++++++}+else+{
++++++++++++o[this.name]+=+elemValue+%7C%7C+'';
++++++++}
++++});
++++return+o;
}|code-block|syntax|javascript|222381|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are sending the form with JSON you must remove [] in the sending string. You can do that with the jQuery function serializeObject():

<pre><code>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;
}
</code></pre>

blocks|key|224503|text|我知道这不符合helper函数的要求，但我使用的方法是使用jQuery的$.each()方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224504|var+loginForm+=+$('.login').serializeArray();
var+loginFormObject+=+{};
$.each(loginForm,
++++function(i,+v)+{
++++++++loginFormObject[v.name]+=+v.value;
++++});|code-block|syntax|javascript|224505|然后，我可以将loginFormObject传递给我的后端，或者您也可以创建一个userobject并将其保存在backbone中。|224506|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I know this doesn't meet the helper function requirement, but the way I've done this is using jQuery's $.each() method

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

Then I can pass loginFormObject to my backend, or you could create a userobject and save() it in backbone as well.

blocks|key|224550|text|下面是我在这种情况下使用的模块(在我的formhelper.js中)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224551|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;
});|code-block|syntax|javascript|224552|我似乎找不到另一种方法来做我想做的事情，这有点糟糕。|224553|这将为我返回此JSON：|224554|{"first_name":"John","last_name":"Smith","age":"30"}|224555|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is what I use for this situation as a module (in my formhelper.js): 

<pre><code>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;
});
</code></pre>

It kind of sucks that I can't seem to find another way to do what I want to do. 

This does return this JSON for me: 

<pre><code>{"first_name":"John","last_name":"Smith","age":"30"}
</code></pre>

blocks|key|2873277|text|如果您不关心具有相同名称的重复表单元素，则可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2873278|var+data+=+$("form.login").serializeArray();
var+formData+=+_.object(_.pluck(data,+'name'),+_.pluck(data,+'value'));|code-block|syntax|javascript|2873279|我在这里使用的是Underscore.js。|offset|length|2873280|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Underscore.js^0|0|0|8|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

If you do not care about repetitive form elements with the same name, then you can do:

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

I am using <a href="https://en.wikipedia.org/wiki/Underscore.js" rel="noreferrer">Underscore.js</a> here.

blocks|key|3087154|text|为了解决同样的问题(不涉及复杂插件和库的验证)，我创建了jQuery.serializeJSON，它改进了serializeArray以支持任何类型的嵌套对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3087155|这个插件变得非常流行，但在另一个项目中，我使用的是Backbone.js，我想在Backbone.js模型中编写验证逻辑。然后，我创建了Backbone.Formwell，它允许您在表单中直接显示验证方法返回的错误。|3087156|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/marioizquierdo/jquery.serializeJSON|1|https://en.wikipedia.org/wiki/Backbone.js|2|https://github.com/marioizquierdo/backbone-formwell^0|S|K|0|0|P|B|1|1W|H|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

Trying to solve the same problem (validation without getting into complex plugins and libraries), I created <a href="https://github.com/marioizquierdo/jquery.serializeJSON" rel="noreferrer">jQuery.serializeJSON</a>, that improves serializeArray to support any kind of nested objects.

This plugin got very popular, but in another project I was using <a href="https://en.wikipedia.org/wiki/Backbone.js" rel="noreferrer">Backbone.js</a>, where I would like to write the validation logic in the Backbone.js models. Then I created <a href="https://github.com/marioizquierdo/backbone-formwell" rel="noreferrer">Backbone.Formwell</a>, which allows you to show the errors returned by the validation method directly in the form.

blocks|key|222492|text|下面的代码应该能帮你解决这个问题。:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|222493|+//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+%7C%7C+'');
++++++++++++}+else+{
++++++++++++++++o[this.name]+=+this.value+%7C%7C+'';
++++++++++++}
++++++++});
++++++++return+o;
++++};

++++$(function()+{
++++++++$('form.login').on('submit',+function(e)+{
++++++++++e.preventDefault();

++++++++++var+formData+=+$(this).serializeObject();
++++++++++console.log(formData);
++++++++++$('.datahere').html(formData);
++++++++});
++++});
</script>|code-block|syntax|javascript|222494|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The below code should help you out. :)
<pre><code> //The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
 &lt;script src=&quot;//code.jquery.com/jquery-2.1.0.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
 $.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);
 });
 });
&lt;/script&gt;
</code></pre>

blocks|key|222496|text|下面的代码使用jQuery并避免使用serializeArray，以JSON格式序列化并发送表单数据：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|222497|$("#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:+"+%2B+data);
++++})
++++.fail(function(jqXHR,+textStatus,+errorThrown){
++++++++console.log("Ajax+problem:+"+%2B+textStatus+%2B+".+"+%2B+errorThrown);
++++});
++++event.preventDefault();
});|code-block|syntax|javascript|222498|entityMap^0|I|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Using jQuery and avoiding <code>serializeArray</code>, the following code serializes and sends the form data in JSON format:

<pre><code>$("#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();
});
</code></pre>

blocks|key|3087173|text|我的贡献：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3087174|function+serializeToJson(serializer){
++++var+_string+=+'{';
++++for(var+ix+in+serializer)
++++{
++++++++var+row+=+serializer[ix];
++++++++_string+%2B=+'"'+%2B+row.name+%2B+'":"'+%2B+row.value+%2B+'",';
++++}
++++var+end+=_string.length+-+1;
++++_string+=+_string.substr(0,+end);
++++_string+%2B=+'}';
++++console.log('_string:+',+_string);
++++return+JSON.parse(_string);
}

var+params+=+$('#frmPreguntas+input').serializeArray();
params+=+serializeToJson(params);|code-block|syntax|javascript|3087175|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My contribution:

<pre><code>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);
</code></pre>

blocks|key|3087177|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3087178|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;
++++}
});|code-block|syntax|javascript|3087179|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use:

<pre><code>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;
 }
});
</code></pre>

blocks|key|219404|text|我找不到一个可以解决这个问题的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219405|[{name:"Vehicle.Make",+value:+"Honda"},+{name:"Vehicle.VIN",+value:+"123"}]|code-block|syntax|javascript|219406|这需要这个对象：|219407|{Vehicle:+{Make:+"Honda",+"VIN":+"123"}}|219408|所以我不得不写一个我自己的序列化程序来解决这个问题：|219409|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;
++++}|219410|也许这会对某些人有帮助。|219411|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I couldn't find an answer that would solve this:

<pre><code>[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]
</code></pre>

This calls for this object:

<pre><code>{Vehicle: {Make: "Honda", "VIN": "123"}}
</code></pre>

So I had to write a serializer of my own that would solve this:

<pre><code>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;
 }
</code></pre>

Maybe it will help somebody.

blocks|key|2873410|text|好吧，这里有一个很方便的插件：https://github.com/macek/jquery-serialize-object|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2873411|它的问题是：|2873412|2873413|继续前进，在核心序列化的基础上，.serializeObject将支持对布尔值和Numer值进行正确的序列化，从而产生两种情况下的有效类型。|blockquote|2873414|2873415|期待在>=+2.1.0中实现这些功能|2873416|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/macek/jquery-serialize-object^0|F|1C|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|10|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Well, here's a handy plugin for it: <a href="https://github.com/macek/jquery-serialize-object" rel="nofollow noreferrer">https://github.com/macek/jquery-serialize-object</a>
The issue for it is:
<blockquote>
Moving ahead, on top of core serialization, .serializeObject will support correct serializaton for boolean and number values, resulting valid types for both cases.
Look forward to these in &gt;= 2.1.0
</blockquote>

blocks|key|219422|text|使用Underscore.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|219423|function+serializeForm($form){
++++return+_.object(_.map($form.serializeArray(),+function(item){return+[item.name,+item.value];+}));
}|code-block|syntax|javascript|219424|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Underscore.js^0|2|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Using <a href="https://en.wikipedia.org/wiki/Underscore.js" rel="nofollow">Underscore.js</a>:

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

I want to do some pre-server-validation of a form in a <a href="https://en.wikipedia.org/wiki/Backbone.js">Backbone.js </a> model. To do this I need to get the user input from a form into usable data.
I found three methods to do this:

<ol>
<li><code>var input = $("#inputId").val();</code></li>
<li><code>var input = $("form.login").serialize();</code></li>
<li><code>var input = $("form.login").serializeArray();</code></li>
</ol>

Unfortunately, none of the provide a good reabable and developable JSON object which I require. I already looked through several questions on Stack&nbsp;Overflow, but I found only some extra libraries. 

Doesn't <a href="https://en.wikipedia.org/wiki/Underscore.js">Underscore.js</a>, the current jQuery or Backbone.js provide a helper method?

I can't imagine there is no request for such a function.

HTML

<pre><code>&lt;form class="login"&gt;
 &lt;label for="_user_name"&gt;username:&lt;/label&gt;
 &lt;input type="text" id="_user_name" name="user[name]" value="dev.pus" /&gt;
 &lt;label for="_user_pass"&gt;password:&lt;/label&gt;
 &lt;input type="password" id="_user_pass" name="user[pass]" value="1234" /&gt;
 &lt;button type="submit"&gt;login&lt;/button&gt;
&lt;/form&gt;
</code></pre>

JavaScript

<pre><code>var formData = $("form.login").serializeObject();
console.log(formData);
</code></pre>

Outputs

<pre><code>{
 "name": "dev.pus",
 "pass": "1234"
}
</code></pre>

Backbone.js model

<pre><code>var user = new User(formData);
user.save();
</code></pre>

Serialize form data to JSON

服务器

jQuery

JSON

我想对模型中的表单进行一些服务器前验证。为此，我需要将表单中的用户输入转换为可用的数据。我找到了三种方法来做到这一点：var input = $("#inputId").val();var input = $("form.login").serialize();var input = $("form.login").s...

问将表单数据序列化为JSON
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将表单数据序列化为JSONEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将表单数据序列化为JSON
EN