表单序列化javascript（无框架）

javascript serialization forms

2022-08-30 01:42:59

想知道javascript中是否有一个函数没有jquery或任何框架，允许我序列化表单并访问序列化版本？

答案 1

var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);

虽然它似乎只适用于POST请求。

https://developer.mozilla.org/en-US/docs/Web/API/FormData

答案 2

仅适用于现代浏览器

如果您的目标是支持 URLSearchParams API（最新的浏览器）和构造函数（最新的浏览器）的浏览器，请使用：FormData(formElement)

new URLSearchParams(new FormData(formElement)).toString()

除 IE 之外的任何地方

对于支持但不支持构造函数的浏览器，请使用以下 FormData polyfill 和以下代码（除 IE 外，在任何地方都有效）：URLSearchParamsFormData(formElement)

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，必要时使用polyfill和以下代码：Array.from

Array.from(
  new FormData(formElement),
  function(e) { return e.map(encodeURIComponent).join('='); }
).join('&')