无需额外开销的多步表单

无需额外开销的多步表单

大多数表单使用 POST 方法。很少有人使用 GET 方法。GET 会将数据添加到 URL 的末尾。

使用 GET 在页面之间传递数据。你不需要后端来存储数据，也不需要 JavaScript 来显示或隐藏字段。直接利用浏览器内置的功能即可。

• 使用静态页面构建表单。
• 利用查询字符串（query string）数据进行逻辑处理。
• 根据之前的回答显示特定字段。

使用以下脚本在页面间传递数据。它会根据 URL 创建隐藏字段。

window.onload = function() {
  var querystring = window.location.href.split('?')[1];
  var parameters = querystring.split('&');

  for(i = 0; i < parameters.length; i++) {
    var pair = parameters[i].split('=');
    var hiddenfield = document.createElement("input");
    hiddenfield.type = "hidden";
    hiddenfield.name = pair[0];
    hiddenfield.value = pair[1];
    document.forms[0].appendChild(hiddenfield);
  }
};

最后，通过 POST 请求将最终数据发送到你的服务器。数据会保留在浏览器中。

请记住以下几点：

• 数据会显示在 URL 中。
• 不要将其用于密码。
• 用户可能会分享带有其数据的 URL。

来源：https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc