使用纯javascript提交表单后重定向

Posted 2023-02-24

【中文标题】使用纯javascript提交表单后重定向

【英文标题】：Redirect after form submission with pure javascript

【发布时间】：2020-06-06 02:21:37

【问题描述】：

在我的表单中，我让用户输入了一个链接，我的目标是重定向到该链接。但是，我的问题是，每当我尝试让用户重定向时，表单都不会重定向到页面。有几个人推荐了这个：

<form>
  <input type="text" name="blah blah blah" id="url">
  <input type="submit" onclick="return submit_form()">
</form>

function submit_form()
  window.location.href="a url";
  return false;

但是，当我这样做时，我的服务器没有收到用户的输入。我该如何解决这个问题？

编辑： 我也试过这个：

function submit()
  url = getElementById("url").value;
  window.location.href = "url";

【问题讨论】：

1.为您的 url 输入分配一个 id。 2. 使用getElementById 获取函数中的值。 3.使用获取的值重定向用户使用location.assign。

我已经尝试过这样做。那行不通

在这种情况下发布该代码。

显示提交如何工作的代码。发帖，是不是只用 html 就完成了？

它是用原始 html 完成的，除了重定向。然后服务器从 from submit 中获取信息

【参考方案1】：

当您使用浏览器 javascript 将 window.location.href 设置为 URL 时，您的浏览器会立即导航到该 URL，而无需您的服务器干预。这类似于在浏览器的地址栏中输入 URL。

如果您希望服务器进行导航，则需要更复杂的设置。在您的浏览器上，类似这样。

<form action="/your/server/route">
  <input type=hidden" name="redirect" value="https://example.com/where/to/redirect">
  <input type="text" name="blah blah blah">
  <input type="submit" >
</form>

然后在你的节点代码处理/your/server/route ...

if (req.body.redirect) res.redirect(req.body.redirect)

这样，您的服务器会告诉浏览器重定向，作为处理表单帖子的一部分。

安全提示 网络爬虫可能会滥用您将重定向 URL 从浏览器传递到服务器的情况。在使用 req.body.redirect 进行实际重定向之前，始终验证 req.body.redirect 以确保它符合您的预期。

【讨论】：

他们如何传递重定向 URL？我该如何验证？

只有了解您的应用程序的人才可以回答这些问题。您的重定向功能如何为您的用户服务？