使用jQuery将表单数据转换为JavaScript对象
如何将表单的所有元素转换为JavaScript对象?
我希望有一些方法可以自动从表单中构建JavaScript对象,而不必遍历每个元素。 我不需要$('#formid').serialize();
返回的字符串$('#formid').serialize();
,也不希望$('#formid').serializeArray();
返回的地图
#1楼
如果不检查每个元素,实际上是没有办法做到的。 您真正想知道的是“是否已经有人在编写将表单转换为JSON对象的方法?” 类似于以下内容的方法应该起作用-请注意,它只会为您提供通过POST返回的表单元素(必须具有名称)。 这未经测试 。
function formToJSON( selector )
{var form = {};$(selector).find(':input[name]:enabled').each( function() {var self = $(this);var name = self.attr('name');if (form[name]) {form[name] = form[name] + ',' + self.val();}else {form[name] = self.val();}});return form;
}
#2楼
由于XSS攻击和许多其他问题,我不会在现场站点上使用此功能,但是以下是您可以执行的快速示例:
$("#myform").submit(function(){var arr = $(this).serializeArray();var json = "";jQuery.each(arr, function(){jQuery.each(this, function(i, val){if (i=="name") {json += '"' + val + '":';} else if (i=="value") {json += '"' + val.replace(/"/g, '\\"') + '",';}});});json = "{" + json.substring(0, json.length - 1) + "}";// do something with jsonreturn false;
});
#3楼
serializeArray
已经做到了。 您只需要将数据整理成所需的格式:
function objectifyForm(formArray) {//serialize data functionvar returnArray = {};for (var i = 0; i < formArray.length; i++){returnArray[formArray[i]['name']] = formArray[i]['value'];}return returnArray;
}
注意与真实输入同名的隐藏字段,因为它们会被覆盖。
#4楼
此函数应处理多维数组以及具有相同名称的多个元素。
到目前为止,我已经使用了几年:
jQuery.fn.serializeJSON=function() {var json = {};jQuery.map(jQuery(this).serializeArray(), function(n, i) {var _ = n.name.indexOf('[');if (_ > -1) {var o = json;_name = n.name.replace(/\]/gi, '').split('[');for (var i=0, len=_name.length; i<len; i++) {if (i == len-1) {if (o[_name[i]]) {if (typeof o[_name[i]] == 'string') {o[_name[i]] = [o[_name[i]]];}o[_name[i]].push(n.value);}else o[_name[i]] = n.value || '';}else o = o[_name[i]] = o[_name[i]] || {};}}else {if (json[n.name] !== undefined) {if (!json[n.name].push) {json[n.name] = [json[n.name]];}json[n.name].push(n.value || '');}else json[n.name] = n.value || ''; }});return json;
};
#5楼
我最近遇到了同样的问题,并提出了这个.toJSON jQuery插件 , 该插件将表单转换为具有相同结构的JSON对象。 这对于要让用户在特定位置添加更多字段的动态生成的表单特别有用。
关键是您可能实际上希望构建一个表单,使其本身具有结构,因此,假设您要创建一个表单,以便用户在镇上插入他最喜欢的位置:您可以想象此表单代表一个<places>...</places>
包含用户喜欢的位置列表的XML元素,因此是<place>...</place>
元素列表,每个元素都包含例如<name>...</name>
元素, <type>...</type>
元素,然后是<activity>...</activity>
元素列表,以表示您可以在这样的位置执行的活动。 因此,您的XML结构将如下所示:
<places><place><name>Home</name><type>dwelling</type><activity>sleep</activity><activity>eat</activity><activity>watch TV</activity></place><place>...</place><place>...</place></places>
拥有一个表示此确切结构的JSON对象有多酷,因此您可以:
- 将该对象按原样存储在任何类似于CouchDB的数据库中
- 从$ _POST []服务器端读取它,并检索一个正确嵌套的数组,然后可以进行语义操作
- 使用一些服务器端脚本将其转换为格式正确的XML文件(即使您不知道其确切结构是先验的)
- 就像在任何类似Node.js的服务器脚本中一样使用它
好的,所以现在我们需要考虑表单如何表示XML文件。
当然, <form>
标记是root
,但是我们有那个<place>
元素,它是一个容器,而不是数据元素本身,因此我们不能对其使用输入标签。
这是<fieldset>
标记派上用场的地方! 我们将使用<fieldset>
标记来表示表单/ XML表示形式中的所有容器元素,并得到如下结果:
<form name="places"><fieldset name="place"><input type="text" name="name"/><select name="type"><option value="dwelling">Dwelling</option><option value="restoration">Restoration</option><option value="sport">Sport</option><option value="administrative">Administrative</option></select><input type="text" name="activity"/><input type="text" name="activity"/><input type="text" name="activity"/></fieldset></form>
正如您在这种形式中看到的那样,我们正在打破唯一名称的规则,但这是可以的,因为它们将被转换成元素数组,因此只能由它们在数组中的索引来引用。
此时,您可以看到表单中没有name="array[]"
这样的名称,并且所有内容都很漂亮,简单且具有语义。
现在,我们希望将此表单转换为如下所示的JSON对象:
{'places':{'place':[{'name': 'Home','type': 'dwelling','activity':['sleep','eat','watch TV']},{...},{...}]}}
为此,我在这里开发了这个jQuery插件 ,有人在此Code Review线程中进行了优化,如下所示:
$.fn.toJSO = function () {var obj = {},$kids = $(this).children('[name]');if (!$kids.length) {return $(this).val();}$kids.each(function () {var $el = $(this),name = $el.attr('name');if ($el.siblings("[name=" + name + "]").length) {if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {obj[name] = obj[name] || [];obj[name].push($el.toJSO());}} else {obj[name] = $el.toJSO();}});return obj;
};
我也写了一篇博客文章来解释这一点。
这会将表单中的所有内容都转换为JSON(甚至是单选框和复选框),剩下要做的就是调用
$.post('script.php',('form').toJSO(), ...);
我知道有很多方法可以将表单转换为JSON对象,并且可以确保.serialize()
和.serializeArray()
在大多数情况下都能很好地工作,并且大多数是打算使用的,但是我认为将表单作为XML结构编写的整个想法具有有意义的名称并将其转换为格式正确的JSON对象是值得尝试的,而且,如果需要检索动态生成的表单数据,则可以添加同名输入标签而不用担心,这一事实非常有用。
我希望这可以帮助别人!
#6楼
这里最简单。 我已经用一个简单的字符串替换了一个正则表达式,到目前为止,它们的工作就像一个魅力。 我不是正则表达式专家,但我敢打赌,您甚至可以填充非常复杂的对象。
var values = $(this).serialize(),
attributes = {};values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {attributes[name] = value;
});
#7楼
有什么问题:
var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});
#8楼
对于快速,现代的解决方案,请使用JSONify jQuery插件。 以下示例从GitHub README上逐字获取。 全部归功于该插件的作者Kushal Pandya。
鉴于:
<form id="myform"><label>Name:</label><input type="text" name="name"/><label>Email</label><input type="text" name="email"/><label>Password</label><input type="password" name="password"/>
</form>
正在运行:
$('#myform').jsonify();
产生:
{"name":"Joe User","email":"joe@example.com","password":"mypass"}
如果要使用此JSON对象执行jQuery POST:
$('#mybutton').click(function() {$.post('/api/user', JSON.stringify($('#myform').jsonify()));
}
#9楼
我自己将表单编码为多维JavaScript对象,以在生产中使用它。 结果是https://github.com/serbanghita/formToObject.js 。
#10楼
使用:
function form_to_json (selector) {var ary = $(selector).serializeArray();var obj = {};for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;return obj;
}
输出:
{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}
#11楼
使用maček的解决方案 ,我对其进行了修改,使其可以与ASP.NET MVC以相同形式处理其嵌套/复杂对象的方式一起使用。 您要做的就是将验证部分修改为:
"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,
这将匹配并正确映射名称如下的元素:
<input type="text" name="zooName" />
和
<input type="text" name="zooAnimals[0].name" />
#12楼
如果您使用的是Underscore.js ,则可以使用相对简洁的代码:
_.object(_.map($('#myform').serializeArray(), _.values))
#13楼
对于jQuery,有一个插件可以做到这一点jquery.serializeJSON 。 我现在已经在一些项目中成功使用了它。 它像一种魅力。
#14楼
你可以这样做:
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());
参见JSON 。
#15楼
我喜欢使用Array.prototype.reduce
因为它是Array.prototype.reduce
的,并且不依赖Underscore.js等:
$('#formid').serializeArray().reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
这类似于使用Array.prototype.map
的答案,但是您不需要使用其他对象变量来使范围杂乱无章。 一站式购物。
重要说明 :具有具有重复name
属性的输入的表单是有效的HTML,实际上是一种常用方法。 在这种情况下,在此线程中使用任何答案都是不合适的(因为对象键必须是唯一的)。
#16楼
我更喜欢这种方法,因为:您不必重复两个集合,如果需要,可以使用除“名称”和“值”之外的其他东西,并且可以在将值存储到对象中之前对其进行清理(例如,如果您有不想存储的默认值)。
$.formObject = function($o) {var o = {},real_value = function($field) {var val = $field.val() || "";// additional cleaning here, if neededreturn val;};if (typeof o != "object") {$o = $(o);}$(":input[name]", $o).each(function(i, field) {var $field = $(field),name = $field.attr("name"),value = real_value($field);if (o[name]) {if (!$.isArray(o[name])) {o[name] = [o[name]];}o[name].push(value);}else {o[name] = value;}});return o;
}
像这样使用:
var obj = $.formObject($("#someForm"));
仅在Firefox中测试过。
#17楼
从一些较旧的答案:
$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})
#18楼
好的,我知道这已经得到了很高的评价,但是最近又提出了另一个类似的问题 ,我也直接针对这个问题。 我也想提供我的解决方案,因为它比公认的解决方案具有优势:您可以包括禁用的表单元素(这有时很重要,具体取决于用户界面的功能)
这是我对另一个SO问题的回答 :
最初,我们使用的是jQuery的serializeArray()
方法,但其中不包括被禁用的表单元素。 我们通常会禁用与页面上其他源“同步”的表单元素,但是我们仍然需要将数据包括在序列化对象中。 因此serializeArray()
消失了。 我们使用:input
选择器来获取给定容器中的所有输入元素(启用和禁用),然后使用$.map()
创建对象。
var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{var o = {};o[n.name] = $(n).val();return o;
});
console.log(obj);
请注意,要使此功能起作用,您的每个输入都将需要一个name
属性,该属性将成为结果对象的属性的名称。
实际上,这与我们使用的内容略有不同。 我们需要创建一个结构为.NET IDictionary的对象,因此我们使用了此方法:(如果有用,请在此处提供)
var obj = $.map(inputs, function(n, i)
{return { Key: n.name, Value: $(n).val() };
});
console.log(obj);
我喜欢这两种解决方案,因为它们是$.map()
函数的简单用法,并且您可以完全控制选择器(因此,最终将哪些元素包括在结果对象中)。 另外,不需要额外的插件。 普通的旧jQuery。
#19楼
我发现这个问题的最简单,最准确的方法是使用烧烤插件或这一个 (大约是0.5K字节大小)。
它也适用于多维数组。
$.fn.serializeObject = function() { return $.deparam(this.serialize()); };
#20楼
使用lodash#set
let serialized = [{ key: 'data[model][id]', value: 1 },{ key: 'data[model][name]', value: 'product' },{ key: 'sid', value: 'dh0un1hr4d' }
];serialized.reduce(function(res, item) {_.set(res, item.key, item.value);return res;
}, {});// returns
{"data": {"model": {"id": 1,"name": "product"}},"sid": "dh0un1hr4d"
}
#21楼
对于所有给出的答案,存在一些问题,是...,如果将名称输入为名称为
name[key]
数组,但它将生成为
name:{ key : value }
例如:如果我有这样的形式。
<form><input name="name" value="value" ><input name="name1[key1]" value="value1" ><input name="name2[key2]" value="value2" ><input name="name3[key3]" value="value3" >
</form>
然后它将使用所有给定的答案生成这样的对象。
Object {name : 'value',name1[key1] : 'value1',name2[key2] : 'value2',name3[key3] : 'value3',
}
但是它必须像下面这样生成,任何人都想像下面这样。
Object {name : 'value',name1 : { key1 : 'value1' },name2 : { key2 : 'value2' },name3 : { key2 : 'value2' }
}
然后尝试下面的js代码。
(function($){ $.fn.getForm2obj = function(){ var _ = {},_t=this; this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);} this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); }; $.map(this.serializeArray(),function(n){ if(n.name.indexOf('[') > -1 ){ var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\\[\\])/g),le = Object.keys(keys).length,tmp = '_'; $.map(keys,function(key,i){ if(key == ''){ eval("ale = Object.keys("+tmp+").length;"); if(!ale) _t.b(tmp,'[]'); if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1); else _t.b(tmp += "["+ale+"]",'{}'); }else{ _t.c(tmp += "['"+key+"']",'{}'); if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'"); } }); }else _t.b("_['"+n['name']+"']","'"+n['value']+"'"); }); return _; } })(jQuery); console.log($('form').getForm2obj()); $('form input').change(function(){ console.clear(); console.log($('form').getForm2obj()); });
<!DOCTYPE html><html><head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <title>Convert form data to JavaScript object with jQuery</title> </head> <body> <form> <input type="checkbox" name="name4[]" value="1" checked="checked">1 <input type="checkbox" name="name4[]" value="2">2 <input type="checkbox" name="name4[]" value="3">3<br> <input type="radio" name="gender" value="male" checked="checked">male <input type="radio" name="gender" value="female"> female <input name="name" value="value" > <input name="name1[key1]" value="value1" > <input name="name2[key2]" value="value2" > <input name="name3[key3]" value="value3" ><br><br> <input name="one[another][another_one]" value="value4" > </form> </body></html>
#22楼
单行代码(除了jQuery外没有其他依赖项),对传递给map
方法的函数使用固定的对象绑定。
$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]
它能做什么?
"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }
适用于渐进式Web应用程序(可以轻松地支持常规表单提交操作以及Ajax请求)
#23楼
另一个答案
document.addEventListener("DOMContentLoaded", function() { setInterval(function() { var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]'); var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0]; console.log(json) document.querySelector('#asJSON').value = JSON.stringify(json); }, 1000); })
<form name="userprofile" id="form"> <p>Name <input type="text" name="firstname" value="John"/></p> <p>Family name <input name="lastname" value="Smith"/></p> <p>Work <input name="employment[name]" value="inc, Inc."/></p> <p>Works since <input name="employment[since]" value="2017" /></p> <p>Photo <input type="file" /></p> <p>Send <input type="submit" /></p> </form> JSON: <textarea id="asJSON"></textarea>
FormData: https : //developer.mozilla.org/zh-CN/docs/Web/API/FormData
#24楼
const formData = new FormData(form);let formDataJSON = {};for (const [key, value] of formData.entries()) {formDataJSON[key] = value;
}
#25楼
我发现Tobias Cohen的代码有问题(我没有足够的要点直接对其进行评论),否则对我有用。 如果您有两个具有相同名称的选择选项,且都具有value =“”,则原始代码将产生“ name”:“”而不是“ name”:[“”,“”]
我认为可以通过在第一个if条件上添加“ || o [this.name] ==”来解决此问题:
$.fn.serializeObject = function()
{var o = {};var a = this.serializeArray();$.each(a, function() {if (o[this.name] || 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;
};
#26楼
Tobias Cohen解决方案的固定版本。 这个可以正确处理0
和''
类的虚假值。
jQuery.fn.serializeObject = function() {var arrayData, objectData;arrayData = this.serializeArray();objectData = {};$.each(arrayData, function() {var value;if (this.value != null) {value = this.value;} else {value = '';}if (objectData[this.name] != null) {if (!objectData[this.name].push) {objectData[this.name] = [objectData[this.name]];}objectData[this.name].push(value);} else {objectData[this.name] = value;}});return objectData;
};
还有一个CoffeeScript版本,以方便您进行编码:
jQuery.fn.serializeObject = ->arrayData = @serializeArray()objectData = {}$.each arrayData, ->if @value?value = @valueelsevalue = ''if objectData[@name]?unless objectData[@name].pushobjectData[@name] = [objectData[@name]]objectData[@name].push valueelseobjectData[@name] = valuereturn objectData
#27楼
所有这些答案对我而言似乎都是如此。 为了简单起见,有话要说。 只要您所有的表单输入都设置了name属性,它就应该只对jim dandy有效。
$('form.myform').submit(function () { var $this = $(this) , viewArr = $this.serializeArray() , view = {}; for (var i in viewArr) { view[viewArr[i].name] = viewArr[i].value; } //Do stuff with view object here (eg JSON.stringify?) });
#28楼
我喜欢samuels版本,但我相信它有一个小错误。 通常,JSON发送为
{“ coreSKU”:“ PCGUYJS”,“ name_de”:“无论”,...
不像
[{“ coreSKU”:“ PCGUYJS”},{“ name_de”:“无论”},...
因此,IMO的功能应为:
App.toJson = function( selector ) {var o = {};$.map( $( selector ), function( n,i ){o[n.name] = $(n).val();}); return o;
}
并将其包装在数据数组中(也是通常期望的),最后将其作为字符串发送给App.stringify({data:App.toJson('#cropform:input'}})
对于精简版本,请看问题3593046 ,在JSON2.js中查看所有包含所有最终事件的版本。 那应该涵盖了全部:)
#29楼
我发现所选解决方案有问题。
当使用具有基于数组名称的表单时,jQuery serializeArray()函数实际上消失了。
我有一个PHP框架,该框架使用基于数组的字段名称来允许将同一表单在多个视图中多次放置到同一页面上。 将添加,编辑和删除都放在同一页面上而不会与表单模型冲突会很方便。
由于我想对表格进行序列化,而不必删除绝对的基本功能,因此我决定编写自己的seralizeArray():
var $vals = {};$("#video_edit_form input").each(function(i){var name = $(this).attr("name").replace(/editSingleForm\[/i, '');name = name.replace(/\]/i, '');switch($(this).attr("type")){case "text":$vals[name] = $(this).val();break;case "checkbox":if($(this).attr("checked")){$vals[name] = $(this).val();}break;case "radio":if($(this).attr("checked")){$vals[name] = $(this).val();}break;default:break;}});
请注意:这也可以在表单commit()之外使用,因此,如果在其余代码中发生错误,则当您将链接按钮放置为“保存更改”时,表单将不会提交。
还要注意,永远不要仅使用此函数来验证表单,以收集要发送到服务器端的数据以进行验证。 使用这样的弱代码和大量分配的代码将导致XSS等。
#30楼
像老板一样将表单转换为JSON
当前来源在GitHub和Bower上 。
$ bower安装jquery-serialize-object
现在不推荐使用以下代码。
以下代码可以处理各种输入名称; 并按您期望的方式处理它们。
例如:
<!-- All of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// Output
{"honey":{"badger":"a"},"wombat":["b"],"hello":{"panda":["c"]},"animals":[{"name":"d","breed":"e"}],"crazy":[null,[{"wonky":"f"}]],"dream":{"as":{"vividly":{"as":{"you":{"can":"g"}}}}}
}
用法
$('#my-form').serializeObject();
魔术(JavaScript)
(function($){$.fn.serializeObject = function(){var self = this,json = {},push_counters = {},patterns = {"validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,"key": /[a-zA-Z0-9_]+|(?=\[\])/g,"push": /^$/,"fixed": /^\d+$/,"named": /^[a-zA-Z0-9_]+$/};this.build = function(base, key, value){base[key] = value;return base;};this.push_counter = function(key){if(push_counters[key] === undefined){push_counters[key] = 0;}return push_counters[key]++;};$.each($(this).serializeArray(), function(){// Skip invalid keysif(!patterns.validate.test(this.name)){return;}var k,keys = this.name.match(patterns.key),merge = this.value,reverse_key = this.name;while((k = keys.pop()) !== undefined){// Adjust reverse_keyreverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');// Pushif(k.match(patterns.push)){merge = self.build([], self.push_counter(reverse_key), merge);}// Fixedelse if(k.match(patterns.fixed)){merge = self.build([], k, merge);}// Namedelse if(k.match(patterns.named)){merge = self.build({}, k, merge);}}json = $.extend(true, json, merge);});return json;};
})(jQuery);
#31楼
将任何东西变成一个对象(未经单元测试)
<script type="text/javascript">
string = {};string.repeat = function(string, count)
{return new Array(count+1).join(string);
}string.count = function(string)
{var count = 0;for (var i=1; i<arguments.length; i++){var results = string.match(new RegExp(arguments[i], 'g'));count += results ? results.length : 0;}return count;
}array = {};array.merge = function(arr1, arr2)
{for (var i in arr2){if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')arr1[i] = array.merge(arr1[i], arr2[i]);elsearr1[i] = arr2[i]}return arr1;
}array.print = function(obj)
{var arr = [];$.each(obj, function(key, val) {var next = key + ": ";next += $.isPlainObject(val) ? array.print(val) : val;arr.push( next );});return "{ " + arr.join(", ") + " }";
}node = {};node.objectify = function(node, params)
{if (!params)params = {};if (!params.selector)params.selector = "*";if (!params.key)params.key = "name";if (!params.value)params.value = "value";var o = {};var indexes = {};$(node).find(params.selector+"["+params.key+"]").each(function(){var name = $(this).attr(params.key),value = $(this).attr(params.value);var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function(){return '"'+arguments[1]+'"';}).replace(/\[(.*?)\]/gi, function(){if (arguments[1].length == 0){var index = arguments[3].substring(0, arguments[2]);indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;return ':{"'+indexes[index]+'"';}elsereturn ':{"'+escape(arguments[1])+'"';})+':"'+value.replace(/[\\"]/gi, function(){return "\\"+arguments[0]; })+'"'+string.repeat('}', string.count(name, ']'))+"}");o = array.merge(o, obj);});return o;
}
</script>
测试输出:
$(document).ready(function()
{console.log(array.print(node.objectify($("form"), {})));console.log(array.print(node.objectify($("form"), {selector: "select"})));
});
上
<form><input name='input[a]' type='text' value='text'/><select name='input[b]'><option>select</option></select><input name='otherinput[c][a]' value='a'/><input name='otherinput[c][]' value='b'/><input name='otherinput[d][b]' value='c'/><input name='otherinput[c][]' value='d'/><input type='hidden' name='anotherinput' value='hidden'/><input type='hidden' name='anotherinput' value='1'/><input type='submit' value='submit'/>
</form>
将产生:
{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }
使用jQuery将表单数据转换为JavaScript对象相关推荐
- form表单序列化转换为json对象
form表单序列化转换为json对象 //form表单序列化转换为json对象 (function($){$.fn.serializeJson=function(){var serializeObj= ...
- php把表单转为json保存,javascript – 使用jquery将表单数据保存到本地json文件中
我有一个带有一些输入字段的基本表单.我想在提交表单时将表单数据保存到json文件中. json文件中保存数据的格式应如下所示. [ {"title":"some text ...
- JSON 数据转换为 JavaScript 对象
一.介绍 JSON 语法规则 数据为 键/值 对. 数据由逗号分隔. 大括号保存对象 方括号保存数组 二.JSON 字符串转换为 JS(JSON)对象 方法一:JavaScript 内置函数 JSON ...
- 利用Jquery将表单序列化成JS对象
//表单序列化成JSON对象 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.eac ...
- java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...
- Jquery 将表单序列化为Json对象
大家知道Jquery中有serialize方法,可以将表单序列化为一个"&"连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有 ...
- css将字符串转换为html,将CSS文本转换为JavaScript对象
这是解析器的开始,可以做你想要的.当然它需要工作,特别是如果你想处理可能提供的任何通用CSS.这假设输入css是按照您提供的方式编写的,第一行是属性的名称,最后一行是'}',依此类推. 如果您不想只处 ...
- 将JSON格式数据转换为javascript对象 JSON.parse()
<html> <body> <h2>通过 JSON 字符串来创建对象</h3> <p> First Name: <span id=&q ...
- 如何把 JSON 格式的字符串,转换为 JavaScript 对象
代码展示:
最新文章
- mysql64如何配置_win7 64位下如何安装配置mysql-winx64(安装记录)
- 【C 语言】字符串模型 ( strstr-while 模型 | 抽象函数模型 | 业务子函数接口定义要点 | 形参指针间接赋值 | 返回值状态 | 形参指针处理 | 形参指针判空 | 形参返回值 )
- 【bzoj2460】[BeiJing2011]元素 贪心+高斯消元求线性基
- 10月31日,面试题小结
- nuxt sass 全局变量的问题_Sass入门教程
- ZOJ 2540 Form a Square
- Silverlight的OOB特性
- oracle数据块dump信息,从数据块的dump信息能看出什么
- 未来智慧城市长啥样?华为云让我们到深圳看一看
- iOS逆向之自动化重签名
- vue 大概流程(未完)
- Atitit ocr识别原理 与概论 attilax总结
- Spring-IOC本质
- android开机自动启动app,android如何实现开机自动启动Service或app
- 计算机内存die,从内存时序的角度告诉你 三星B-DIE为何成为高端所用
- python编写程序计算梯形面积公式_肿么用c语言编写程序梯形面积
- CSDN博客给我带来的一些诱惑和选择机会
- EXCEL数据分析——分列
- IOS与安卓怎样切换ip?
- 数字化转型,你也可以品
热门文章
- 回溯算法-----复原IP地址(Java版本)
- 解决: is not accessible from java.lang.Class android.app.AppComponentFactory
- LyaoutParameters作用
- Android Jetpack组件之Hilt使用
- mysql客户端连接hive_连接Hive的客户端界面工具–SQuirrel SQL Client
- 编译-speex For iOS静态库
- python 提交form-data之坑
- Deepin系统安装
- 关系数据库标准语言 SQL (ch.3)
- C语言中static的作用及C语言中使用静态函数有何好处