如何将表单数据从一个html页面发送到另一个

Question

我目前正在使用 PostgreSQL、JS 和 HTML 创建我的员工注册网站，但在获取从 html 页面发送到另一个 html 页面的表单数据时遇到问题。 正如您在这段代码中看到的那样

<form id="signin" action="register.html" method="post">
    <input name="name"/>
    <input name="user"/>
    <input name="pass"/>
    <input type="submit" value="Submit"/>
</form>

当我将用户发送到网站“register.html”时，表单数据出现： 但我尝试使用js来检索表单数据，但没有成功。我尝试使用 FormData 类和 URLSearchParams，但没有任何效果。（不，我不能使用 URL 查询参数）

我尝试使用 FormData、URLSearchParams、Request，但都不起作用。我希望他们能够获取 html 页面内的表单数据。

Answer 1

如果您尝试使用 JavaScript 访问“register.html”页面上的表单数据，您需要了解数据通常在提交表单时在服务器端处理。如果您想使用 JavaScript 在客户端操作或显示表单数据，您有几种选择。

1. 在“register.html”上使用 JavaScript 检索表单数据：

您可以在“register.html”页面上使用JavaScript来检索表单数据。您需要在“register.html”页面上添加一个脚本，该脚本在页面加载时运行。

<script>
window.onload = function() {
    // Get form data
    const formData = new FormData(document.getElementById('signin'));

    // Access form fields
    const name = formData.get('name');
    const user = formData.get('user');
    const pass = formData.get('pass');

    // Do something with the data
    console.log(name, user, pass);
};
 </script>

此脚本使用 FormData API 获取表单数据，然后提取各个字段值。

2.使用本地存储或会话存储：

如果想跨页面持久化数据，可以使用本地存储或会话存储。

<script>
window.onload = function() {
    const formData = new FormData(document.getElementById('signin'));

    // Store form data in local storage
    localStorage.setItem('formData', 
    JSON.stringify(Object.fromEntries(formData.entries())));

    // Access and parse the stored data
    const storedData = JSON.parse(localStorage.getItem('formData'));

    // Do something with the data
    console.log(storedData.name, storedData.user, storedData.pass);
};
 </script>

请注意，使用本地存储可能不是最安全的方法，特别是当表单包含敏感信息时。

3.服务器端处理：

如果您需要在服务器端处理数据（例如将其存储在数据库中），您应该将表单数据提交给处理数据处理的服务器端脚本（例如PHP、Node.js），然后将用户重定向到“register.html”页面。

确保您使用正确的方法提交表单，并且您的 JavaScript 代码放置在“register.html”页面上的正确位置。如果您仍然遇到问题，您可能需要检查浏览器控制台是否有任何错误消息。