如何从HTML表单提取文本值至Express.js并实现提交反馈

问题描述 #

访问http://localhost:3000时显示表单页面，点击提交按钮后获取「Stage URL」和「Production URL」的输入值，并将结果反馈到HTML页面中。

问题分析 #

原代码存在几个关键问题：

• HTML表单未设置id="form1"，导致提交按钮无法关联表单；缺少method和action属性，无法正确将参数提交到Express路由。
• Express路由中连续调用res.sendFile和res.send，违反HTTP响应规则（一个请求只能发送一次响应）。
• 未区分「首次访问显示表单」和「提交后显示结果」的逻辑分支。

修改后的代码实现 #

1. HTML代码（index.html） #

<body>
    <form id="form1" method="get" action="/">
        <label for="stageURL">Stage URL:</label><br>
        <input type="text" id="stageURL" name="stageURL"><br>
        <label for="prodURL">Production URL:</label><br>
        <input type="text" id="prodURL" name="prodURL"><br><br>
        <button type="submit" value="Submit">Submit</button>
    </form>
    <!-- 用于展示提交结果的区域 -->
    <div id="result"></div>
</body>

2. Express.js代码 #

const express = require('express');
const app = express();
const path = require('path');
const port = 3000;

app.get('/', function(req, res) {
    const stageUrl = req.query.stageURL;
    const prodUrl = req.query.prodURL;

    // 首次访问或未提交参数时，返回原始表单页面
    if (!stageUrl && !prodUrl) {
        return res.sendFile(path.join(__dirname, '/index.html'));
    }

    // 有提交参数时，生成包含结果的HTML内容
    const htmlContent = `
    <body>
        <form id="form1" method="get" action="/">
            <label for="stageURL">Stage URL:</label><br>
            <input type="text" id="stageURL" name="stageURL" value="${stageUrl}"><br>
            <label for="prodURL">Production URL:</label><br>
            <input type="text" id="prodURL" name="prodURL" value="${prodUrl}"><br><br>
            <button type="submit" value="Submit">Submit</button>
        </form>
        <div id="result">
            <h3>提交结果:</h3>
            <p>Stage URL: ${stageUrl}</p>
            <p>Production URL: ${prodUrl}</p>
        </div>
    </body>
    `;
    res.send(htmlContent);
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

功能说明 #

• HTML表单补充了id="form1"与提交按钮关联，设置method="get"和action="/"，确保提交时将参数通过GET请求发送到根路由。
• Express路由通过判断请求参数是否存在，区分两种场景：无参数时返回空白表单，有参数时返回带结果的页面，同时保留表单输入值方便再次提交。
• 提交后页面下方会显示输入的两个URL值，实现需求中的反馈效果。

内容的提问来源于stack exchange，提问作者ArrchanaMohan