想知道javascript中是否有一个函数没有jquery或任何框架,可以让我序列化表单并访问序列化版本?
发布于 2012-07-26 09:46:38
微型from-serialize library不依赖于框架。除此之外,您还需要自己实现序列化函数。(尽管它的重量是1.2KB,为什么不使用它呢?)
发布于 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请求。
发布于 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('&')
https://stackoverflow.com/questions/11661187
复制相似问题