想知道 javascript 中是否有没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本？
表单序列化javascript（无框架）
IT技术
javascript
forms
serialization
2021-01-30 14:22:56
6个回答
这是纯 JavaScript 方法：
var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);
虽然它似乎只适用于 POST 请求。
仅适用于现代浏览器
如果您的目标浏览器支持URLSearchParamsAPI（最新浏览器）和FormData(formElement)构造函数（最新浏览器），请使用：
new URLSearchParams(new FormData(formElement)).toString()
除了 IE 之外的所有地方
对于支持URLSearchParams但不支持FormData(formElement)构造函数的浏览器，请使用此 FormData polyfill和此代码（适用于除 IE 之外的所有地方）：
new URLSearchParams(Array.from(new FormData(formElement))).toString()
例子
与 IE 10 兼容
对于更旧的浏览器（例如 IE 10），请使用FormData polyfill，Array.from必要时使用polyfill 和以下代码：
Array.from(
new FormData(formElement),
e => e.map(encodeURIComponent).join('=')
).join('&')
微型from-serialize 库不依赖于框架。除此之外，您还需要自己实现序列化功能。（尽管重量为 1.2 KB，为什么不使用它呢？）
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 'tel':
case 'email':
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 编码。在返回字符串之前，%20 个字符的正则表达式替换只发生一次。
查询字符串的形式与 jQuery 的 $.serialize() 方法的结果相同。