如何使用 javascript 從表單存儲數據並將其顯示在新頁面上？

Question

我需要制作一個包含 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) => {

  event.preventDefault();


  const formData = new FormData(formEl);


  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) => {

      window.location.href = "./Success.html";
    })
    .catch((error) => {

      console.error(error);
    });
});

我有第二個 html 頁面，名為 Success.html，我想顯示表單中給出的數據。 我需要模擬 API 所以我嘗試使用 reqres。

這是我的 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>
    <script>
  
      const formData = JSON.parse(request.body);

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

      filmEl.textContent = formData.film;
      ratingEl.textContent = formData.rating;
    </script>
  </body>
</html>

我認為這會起作用，但在按提交后出現此錯誤：

`` Success.html:16 Uncaught ReferenceError: request is not defined at Success.html:16:35

Answer 1

該行const formData = JSON.parse(request.body); 在你的success.html試圖引用一個名為request的變量，它沒有在它包含的<script>標簽的 scope 中定義 - 這就是你得到ReferenceError: request is not defined錯誤的原因。

This other Stackoverflow question seems similar to yours - I have linked you to an answer that I think would help. 簡而言之，您可以從response中提取您關心的值，然后通過查詢參數傳遞它們以顯示在您的success.html中。

按照同樣的思路，您的模擬 API 用 302 狀態代碼和位置 header 進行響應可能是有意義的，包括指向您的成功頁面的電影和評級查詢參數。

Answer 2

您可以通過多種方式在 web 頁之間傳遞數據，以 JSON data { foo: 'bar' }為例：

1.使用URL參數：

Stringify 和 URL 編碼您的 JSON 響應（僅完整或需要的數據），並通過 URL 參數傳遞
示例： 'data=' + encodeURIComponent(JSON.stringify(data)) ，結果為data=%7B%20foo%3A%20'bar'%20%7D
請記住，URL 的長度是有限制的，根據瀏覽器的不同，從 2k 到 64k 不等

2.使用瀏覽器本地存儲：

配額是特定於瀏覽器的，在 5-10MB 范圍內，例如比 URL 長度大得多
在表單頁面設置： localStorage.setItem('myFormData', JSON.stringify(data));
要在成功頁面中閱讀： let data = JSON.parse(localStorage.getItem('myFormData'); （您可能想添加一些錯誤處理）

3.臨時POST數據

您將 JSON 數據回傳到服務器/success
您的成功頁面是通過服務器端腳本動態傳送的，該腳本通過 POST 接收數據，並將其返回為 JSON 或任何其他首選格式
額外的工作，所以不推薦

列出之后，為什么不在表單頁面本身中顯示內容呢？ 您可以使用本機 JavaScript 或 jQuery 輕松更新 DOM。

如何使用 javascript 從表單存儲數據並將其顯示在新頁面上？

問題描述

2 個解決方案

解決方案1
1 2022-12-02 20:36:17

解決方案2
1 2022-12-02 22:50:32

如何使用 javascript 從表單存儲數據並將其顯示在新頁面上？

問題描述

2 個解決方案

解決方案1 1 2022-12-02 20:36:17

解決方案2 1 2022-12-02 22:50:32

解決方案1
1 2022-12-02 20:36:17

解決方案2
1 2022-12-02 22:50:32