表单序列化javascript (无框架)
表单序列化javascript (无框架)
提问于 2012-07-26 09:43:51
想知道javascript中是否有一个函数没有jquery或任何框架，可以让我序列化表单并访问序列化版本？
回答 21
Stack Overflow用户
回答已采纳
发布于 2012-07-26 09:46:38
微型from-serialize library不依赖于框架。除此之外，您还需要自己实现序列化函数。(尽管它的重量是1.2KB，为什么不使用它呢？)
Stack Overflow用户
发布于 2014-10-22 14:21:59
以下是纯JavaScript方法：
var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);尽管它似乎只适用于POST请求。
Stack Overflow用户
发布于 2017-05-18 03:37:26
仅适用于现代浏览器
如果您的目标浏览器支持URLSearchParams应用编程接口(most recent browsers)和FormData(formElement)构造函数(most recent browsers)，请使用以下代码：
new URLSearchParams(new FormData(formElement)).toString()除IE之外的所有地方
对于支持URLSearchParams但不支持FormData(formElement)构造函数的浏览器，请使用this FormData polyfill和以下代码(IE除外)：
new URLSearchParams(Array.from(new FormData(formElement))).toString()示例
var form = document.querySelector('form');
var out = document.querySelector('output');
function updateResult() {
try {
out.textContent = new URLSearchParams(Array.from(new FormData(form)));
out.className = '';
} catch (e) {
out.textContent = e;
out.className = 'error';
}
}
updateResult();
form.addEventListener('input', updateResult);body { font-family: Arial, sans-serif; display: flex; flex-wrap: wrap; }
input[type="text"] { margin-left: 6px; max-width: 30px; }
label + label { margin-left: 10px; }
output { font-family: monospace; }
.error { color: #c00; }
div { margin-right: 30px; }<!-- FormData polyfill for older browsers -->
<script src="https://unpkg.com/formdata-polyfill@3.0.17/formdata.min.js"></script>
<div>
<h3>Form</h3>
<form id="form">
<label>x:<input type="text" name="x" value="1"></label>
<label>y:<input type="text" name="y" value="2"></label>
<label>
z:
<select name="z">
<option value="a" selected>a</option>
<option value="b" selected>b</option>
</select>
</label>
</form>
</div>
<div>
<h3>Query string</h3>
<output for="form"></output>
</div>
与IE 10兼容
对于更老的浏览器(例如IE 10)，可以使用FormData polyfill、Array.from polyfill (如果需要)和以下代码：
Array.from(
new FormData(formElement),
e => e.map(encodeURIComponent).join('=')
).join('&')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11661187
复制相关文章
相似问题