在 HTML 表單回發期間訪問數據

Question

在 15 年沒有 web 開發之后，我正在重新自學 web 開發。 我目前正在學習 Node.js 和 ExpressJS。 我在 index.html 上有一張注冊表。 我正在嘗試將輸入的數據傳輸到 response.html 上的表單。 當我單擊提交時，表單將發布到 response.html。 在 Devtools 下的 response.html 我看到了 Payload 下的數據。 我如何訪問這些數據，以便我可以在 response.html 上使用客戶端 JavaScript 填充表單？

文件結構

服務器.js

var express = require('express');
var bodyParser = require('body-parser');

var app = express();
// Create application/x-www-form-urlencoded parser  
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.use(express.static(`${__dirname}/static`));
app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
});

app.post('/response.html', urlencodedParser, function (req, res) {
    res.sendFile(`${__dirname}/static/response.html`);
});

var server = app.listen(8000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log(`Server is listening onhttp://${host}:${port}`);
});

index.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>Registration</title>
</head>
<body>
    <h1>Registration Form</h1>
    <form action="/response.html" method="POST">  
        <label>First Name: <input type="text" name="first_name"><br></label>  
        <label>Last Name: <input type="text" name="last_name"></label>  
        <input type="submit" value="Submit">  
    </body>
</html>

響應.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>Verify</title>
</head>
<body>
    <h1>Verify Data</h1>
    <form action="/process_final" method="POST">
        <label>First Name: <input type="text" name="first_name"><br></label>
        <label>Last Name: <input type="text" name="last_name"></label>
        <input type="submit" value="Submit">
    </body>
    <button id='getHeaders' type='button'>Get Headers</button>
    <script src='./response.js'></script>
</body>
</html>

我的想法是這將從服務器卸載一些處理。 我知道模板引擎，例如 ejs 和 handlbars。 我也知道 session 存儲和本地存儲。 我不願意使用存儲，因為最終產品中可能會使用敏感數據。 附件是文件夾結構和html個文件的截圖。 還包括 html 代碼和 server.js。

搜索 web 七個小時后，我的結論是這是不可能的。 根據我的閱讀，使用客戶端 JavaScript 訪問 header 信息是不可能的。 不過也有一些例外，例如用戶代理。

Answer 1

您可以使用req.body.first_name和req.body.last_name訪問服務器端的數據，或者您可以像const { firstname, lastname } = req.body一樣解構它

在 HTML 表單回發期間訪問數據

問題描述

1 個解決方案

解決方案1
0 2023-02-01 04:35:15

在 HTML 表單回發期間訪問數據

問題描述

1 個解決方案

解決方案1 0 2023-02-01 04:35:15

解決方案1
0 2023-02-01 04:35:15