html 如何保存表单数据并在提交后在新页面上显示？

au9on6nz 于 2022-12-02 发布在其他

关注(0)|答案(2)|浏览(1716)

我需要做一个有2个输入字段的表单，然后在提交后在新页面上显示数据。
这是我的html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Film survey</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form id="form" action="./Success.html">
      <h1>Movie survey</h1>
      <p>Thank you for participating in the film festival!</p>
      <p>Please fill out this short survey so we can record your feedback</p>

      <div>
        <label for="film">What film did you watch?</label>
      </div>
      <div>
        <input type="text" id="film" name="film" required />
      </div>
      <div>
        <label for="rating"
          >How would you rate the film? (1 - very bad, 5 - very good)
        </label>
      </div>
      <input type="text" id="rating" name="rating" required />
      <div><button class="submit">Submit</button></div>
    </form>
    <script src="script.js"></script>
  </body>
</html>

这是我的js代码

const formEl = document.querySelector("#form");

formEl.addEventListener("submit", (event) => {
  const formData = new FormData(formEl);
  console.log(formData.get("film"));
  console.log(formData.get("rating"));

  fetch("https://reqres.in/api/form", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  });
});

我有一个名为Success.html的第二个html页面，我想显示表单中给出的数据。我需要做一个模拟API，所以我尝试使用reqres。

Html

来源：https://stackoverflow.com/questions/74646274/how-can-i-sore-form-data-and-display-at-on-a-new-page-after-submitting

2条答案

按热度按时间

6tdlim6h1#

下面介绍如何存储表单数据并在提交后将其显示在新页面上。
1.提交表单时，可以使用FormData对象获取输入字段的值。
1.然后，您可以使用fetch API将请求发送到模拟API端点（例如https://reqres.in/api/form），并将表单数据作为请求主体。
1.收到响应后，您可以将用户重定向到Success.html页，在该页中可以显示表单数据。
下面是更新后的JavaScript代码的示例：

const formEl = document.querySelector("#form");

formEl.addEventListener("submit", (event) => {
  // Prevent the form from being submitted
  event.preventDefault();

  // Get the values of the input fields
  const formData = new FormData(formEl);

  // Send a request to the mock API endpoint with the form data as the request body
  fetch("https://reqres.in/api/form", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      film: formData.get("film"),
      rating: formData.get("rating"),
    }),
  })
    .then((response) => {
      // When the response is received, redirect the user to the Success.html page
      window.location.href = "./Success.html";
    })
    .catch((error) => {
      // Handle any errors that occurred
      console.error(error);
    });
});

在Success.html页上，您可以通过访问在请求正文中发送的数据来显示表单数据。
以下是Success.html页面的外观示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Success</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Thank you for your feedback!</h1>
    <p>You watched: <span id="film"></span></p>
    <p>You rated it: <span id="rating"></span></p>
  </body>
</html>

然后，您可以使用JavaScript从请求正文访问表单数据，并将其显示在Success.html页上。
以下是Success.html页面上JavaScript代码的示例：

// Get the values of the form data from the request body
const formData = JSON.parse(request.body);

const filmEl = document.querySelector("#film");
const ratingEl = document.querySelector("#rating");

// Set the text content of the span elements
filmEl.textContent = formData.film;
ratingEl.textContent = formData.rating;

赞(0）回复(0）举报 2022-12-02

5gfr0r5j2#

您可以使用cookie
请尝试使用以下指南：https://www.w3schools.com/js/js_cookies.asp

赞(0）回复(0）举报 2022-12-02