forms序列化JavaScript（无框架）
想知道是否有没有jQuery或任何允许我序列化窗体和访问序列化版本的框架的JavaScript函数？
这个微型库不依赖于框架。 除此之外，您需要自己实现序列化function。 （虽然在1.2千字节的重量，为什么不使用它？）
这里是纯粹的JavaScript方法：
var form = document.querySelector('form'); var data = new FormData(form); var req = new XMLHttpRequest(); req.send(data);
虽然它似乎只适用于POST请求。
function serialize (form) { if (!form || form.nodeName !== "FORM") { return; } var i, j, q = []; for (i = form.elements.length - 1; i >= 0; i = i - 1) { if (form.elements[i].name === "") { continue; } switch (form.elements[i].nodeName) { case 'INPUT': switch (form.elements[i].type) { case 'text': case 'hidden': case 'password': case 'button': case 'reset': case 'submit': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; case 'checkbox': case 'radio': if (form.elements[i].checked) { q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); } break; } break; case 'file': break; case 'TEXTAREA': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; case 'SELECT': switch (form.elements[i].type) { case 'select-one': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; case 'select-multiple': for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) { if (form.elements[i].options[j].selected) { q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value)); } } break; } break; case 'BUTTON': switch (form.elements[i].type) { case 'reset': case 'submit': case 'button': q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value)); break; } break; } } return q.join("&"); }
来源： http : //code.google.com/p/form-serialize/source/browse/trunk/serialize-0.1.js
以下是TibTibs的稍微修改版本：
function serialize(form) { var field, s = []; if (typeof form == 'object' && form.nodeName == "FORM") { var len = form.elements.length; for (i=0; i<len; i++) { field = form.elements[i]; if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') { if (field.type == 'select-multiple') { for (j=form.elements[i].options.length-1; j>=0; j--) { if(field.options[j].selected) s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value); } } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) { s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value); } } } } return s.join('&').replace(/%20/g, '+'); }
禁用的字段被丢弃，名称也是URL编码的。 在返回string之前，正则expression式replace％20个字符只发生一次。
查询string与jQuery的$ .serialize（）方法的结果forms相同。
我从Johndave Decano的回答开始。
这应该解决在他的function回复中提到的一些问题。
- 用％符号replace％20。
- 提交/buttontypes只会被提交，如果他们被点击提交表格。
- 重置button将被忽略。
- 代码似乎对我来说是多余的，因为它基本上是一样的事情，不pipe字段types。 更别说与'tel'和'email'等HTML5字段types不兼容，因此我使用switch语句删除了大部分细节。
如果buttontypes没有名称值，它们仍然会被忽略。
function serialize(form, evt){ var evt = evt || window.event; evt.target = evt.target || evt.srcElement || null; var field, query=''; if(typeof form == 'object' && form.nodeName == "FORM"){ for(i=form.elements.length-1; i>=0; i--){ field = form.elements[i]; if(field.name && field.type != 'file' && field.type != 'reset'){ if(field.type == 'select-multiple'){ for(j=form.elements[i].options.length-1; j>=0; j--){ if(field.options[j].selected){ query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+'); } } } else{ if((field.type != 'submit' && field.type != 'button') || evt.target == field){ if((field.type != 'checkbox' && field.type != 'radio') || field.checked){ query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+'); } } } } } } return query.substr(1); }
这是我目前正在使用这个function。
<form onsubmit="myAjax('http://example.com/services/email.php', 'POST', serialize(this, event))">
这是一个现代的JavaScript单行程序，它从表单节点获取查询string：
Array.from(new FormData(formElement).entries(), e => e.map(encodeURIComponent).join('=')).join('&')
适用于所有现代浏览器，包括MS Edge（但不包括IE）。
HTMLElement.prototype.serialize = function(){ var obj = {}; var elements = this.querySelectorAll( "input, select, textarea" ); for( var i = 0; i < elements.length; ++i ) { var element = elements[i]; var name = element.name; var value = element.value; if( name ) { obj[ name ] = value; } } return JSON.stringify( obj ); }
要这样使用：
var dataToSend = document.querySelector("form").serialize();
我希望我能帮上忙
如果您想要序列化事件上的input。 这是我使用的纯JavaScript方法。
// serialize form var data = {}; var inputs = [].slice.call(e.target.getElementsByTagName('input')); inputs.forEach(input => { data[input.name] = input.value; });
数据将是input的JavaScript对象。
@ SimonSteinberger的代码的重构版本使用较less的variables，并利用forEach循环的速度（比s快一点）
function serialize(form) { var result = []; if (typeof form === 'object' && form.nodeName === 'FORM') Array.prototype.slice.call(form.elements).forEach(function(control) { if ( control.name && !control.disabled && ['file', 'reset', 'submit', 'button'].indexOf(control.type) === -1 ) if (control.type === 'select-multiple') Array.prototype.slice.call(control.options).forEach(function(option) { if (option.selected) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(option.value)); }); else if ( ['checkbox', 'radio'].indexOf(control.type) === -1 || control.checked ) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value)); }); return result.join('&').replace(/%20/g, '+'); }
如果您需要使用json格式的POST提交表单“myForm”，您可以执行：
const formEntries = new FormData(myForm).entries(); const json = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y}))); fetch('/api/foo', { method: 'POST', body: JSON.stringify(json) });
第二行从一个数组转换，如：
[["firstProp", "firstValue"], ["secondProp", "secondValue"], ...and so on... ]
…成为一个常规的对象，如：
{"firstProp": "firstValue", "secondProp": "secondValue", ...and so on ... }
…它通过将mapFn传入Array.from（）来完成此转换。 这个mapFn应用于每个[“a”，“b”]对，并将它们转换为{“a”：“b”}，以便数组包含很多对象，每个对象只有一个属性。 mapFn使用“解构”来获得对的第一和第二部分的名称，它也使用ES6“ComputedPropertyName”来设置由mapFn返回的对象的属性名称（这就是为什么说“ x]：某事“而不仅仅是”x：某事“。
所有这些单个属性对象然后被传递到Object.assign（）函数的参数中，该函数将所有单个属性对象合并到具有所有属性的单个对象中。
Array.from（）： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
解构参数： https ： //simonsmith.io/destructuring-objects-as-function-parameters-in-es6/
更多关于这里计算的属性名称： variables作为JavaScript对象字面值中的属性名称？
我重构TibTibs的答案变得更清晰的阅读。 由于80个字符的宽度和一些注释，它有点长。
此外，它会忽略空白字段名称和空白值。
// Serialize the specified form into a query string. // // Returns a blank string if +form+ is not actually a form element. function $serialize(form, evt) { if(typeof(form) !== 'object' && form.nodeName !== "FORM") return ''; var evt = evt || window.event || { target: null }; evt.target = evt.target || evt.srcElement || null; var field, query = ''; // Transform a form field into a query-string-friendly // serialized form. // // [NOTE]: Replaces blank spaces from its standard '%20' representation // into the non-standard (though widely used) '+'. var encode = function(field, name) { if (field.disabled) return ''; return '&' + (name || field.name) + '=' + encodeURIComponent(field.value).replace(/%20/g,'+'); } // Fields without names can't be serialized. var hasName = function(el) { return (el.name && el.name.length > 0) } // Ignore the usual suspects: file inputs, reset buttons, // buttons that did not submit the form and unchecked // radio buttons and checkboxes. var ignorableField = function(el, evt) { return ((el.type == 'file' || el.type == 'reset') || ((el.type == 'submit' || el.type == 'button') && evt.target != el) || ((el.type == 'checkbox' || el.type == 'radio') && !el.checked)) } var parseMultiSelect = function(field) { var q = ''; for (var j=field.options.length-1; j>=0; j--) { if (field.options[j].selected) { q += encode(field.options[j], field.name); } } return q; }; for(i = form.elements.length - 1; i >= 0; i--) { field = form.elements[i]; if (!hasName(field) || field.value == '' || ignorableField(field, evt)) continue; query += (field.type == 'select-multiple') ? parseMultiSelect(field) : encode(field); } return (query.length == 0) ? '' : query.substr(1); }
// supports IE8 and IE9 function serialize(form) { var inputs = form.elements; var array = []; for(i=0; i < inputs.length; i++) { var inputNameValue = inputs[i].name + '=' + inputs[i].value; array.push(inputNameValue); } return array.join('&'); } //using the serialize function written above var form = document.getElementById("form");//get the id of your form. i am assuming the id to be named form. var form_data = serialize(form); var xhr = new XMLHttpRequest(); xhr.send(form_data); //does not work with IE8 AND IE9 var form = document.querySelector('form'); var data = new FormData(form); var xhr = new XMLHttpRequest(); xhr.send(data);
