基于Node.js Express实现同一页面双表单独立POST请求处理

第一步：修复现有前端表单的提交缺陷 #

现在的表单存在两个会导致提交异常的问题，必须先调整：

• Newsletter表单的提交按钮是<a>标签，不会触发表单原生提交，需要替换为type="submit"的按钮
• 联系表单中多数输入框、文本域只设置了id没有name属性，表单提交时不会携带这些字段的数据
  调整后的完整前端代码如下：

修复后的Newsletter订阅表单 #

<!-- Newsletter signup Section -->
<section class="newsletter-section">
    <form action="/" method="POST">
        <!-- 新增隐藏标识字段，用于后端区分表单来源 -->
        <input type="hidden" name="formType" value="newsletter">
        <span class="newsletter-heading u-text-align-centre u-margin-bottom-medium">
            Subscribe to our monthly newsletter!
        </span>
        <div class="row u-text-align-centre">
            <input type="text" name="email-address" class="newsletter-input">
            <!-- 替换a标签为原生提交按钮 -->
            <button type="submit" class="btn-full btn-round newsletter-btn">Sign Me Up!</button>
        </div>
    </form>
</section>

修复后的联系表单 #

<!--contact section-->
<section class="contact-section">
    <div class="contact-container">
        <h2>Contact Us</h2>
        <div class="container">
            <div class="customer-info">
                <form class="contact-form" action="/" method="POST">
                    <!-- 新增隐藏标识字段，用于后端区分表单来源 -->
                    <input type="hidden" name="formType" value="contact">
                    <div class="name">
                        <div class="first-name">
                            <label for="first-name">First Name</label>
                            <!-- 补充name属性，否则提交时不会携带该字段 -->
                            <input type="text" id="first-name" name="firstName" placeholder="First Name" />
                        </div>
                        <div class="last-name">
                            <label for="last-name">Last Name</label>
                            <!-- 补充name属性 -->
                            <input type="text" id="last-name" name="lastName" placeholder="Last Name" />
                        </div>
                    </div>
                    <div class="contact-info">
                        <div class="email">
                            <label for="email">Email</label>
                            <!-- 补充name属性 -->
                            <input type="email" id="email" name="contactEmail" placeholder="email" />
                        </div>
                        <div class="tel">
                            <label for="tel">Tel</label>
                            <!-- 补充name属性 -->
                            <input type="tel" id="tel" name="tel" placeholder="tel" />
                        </div>
                    </div>
                    <div class="reason">
                        <label for="reason">How may we help you?</label>
                        <select name="reason" id="reason">
                            <option value="">Select an option</option>
                            <option value="Customer-service">Customer Service</option>
                            <option value="book-event">Book for an event</option>
                            <option value="place-order">Place Order</option>
                            <option value="inquiries">Inquiries</option>
                            <option value="####">Other</option>
                        </select>
                    </div>
                    <div class="short-message">
                        <!-- 补充name属性 -->
                        <textarea id="message" name="message" rows="10" placeholder="Type a short message here"></textarea>
                    </div>
                    <div class="save-info">
                        <span>Save my info for next time</span>
                        <!-- 补充name属性 -->
                        <input type="checkbox" name="saveInfo" class="final-input" />
                    </div>
                    <div class="submit">
                        <button type="submit" name="submit" class="btn-round">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

后端处理方案 #

方案一：保留现有同/路径提交 #

适合不想改动现有表单action配置的场景
直接在现有Express项目中新增app.post('/')路由，通过req.body.formType判断表单来源，分别执行对应逻辑：

// 新增POST处理路由
app.post('/', (req, res) => {
    const formType = req.body.formType;
    // 处理Newsletter订阅逻辑
    if (formType === 'newsletter') {
        const subscriberEmail = req.body['email-address'];
        // 在此处编写自定义订阅处理逻辑：如存储到数据库、发送订阅通知邮件等
        console.log('收到Newsletter订阅请求：', subscriberEmail);
        // 处理完成后重定向回首页
        return res.redirect('/');
    }
    // 处理联系表单逻辑
    if (formType === 'contact') {
        const contactData = {
            firstName: req.body.firstName,
            lastName: req.body.lastName,
            email: req.body.contactEmail,
            tel: req.body.tel,
            reason: req.body.reason,
            message: req.body.message,
            saveInfo: req.body.saveInfo ? true : false
        };
        // 在此处编写自定义联系表单处理逻辑：如存储到数据库、发送咨询通知邮件等
        console.log('收到联系表单请求：', contactData);
        return res.redirect('/');
    }
    // 处理未识别的非法请求
    res.status(400).send('非法请求');
});

方案二：独立路由拆分（推荐） #

适合可灵活调整前端配置、追求代码结构清晰的场景
给两个表单配置独立的提交路径，后端无需做来源判断，结构更清晰，也更符合接口设计规范。

前端调整

• Newsletter表单的action改为/subscribe-newsletter
• 联系表单的action改为/contact

后端新增独立POST路由

// 处理Newsletter订阅
app.post('/subscribe-newsletter', (req, res) => {
    const subscriberEmail = req.body['email-address'];
    // 自定义订阅处理逻辑
    console.log('收到Newsletter订阅请求：', subscriberEmail);
    res.redirect('/');
});
// 处理联系表单
app.post('/contact', (req, res) => {
    const contactData = {
        firstName: req.body.firstName,
        lastName: req.body.lastName,
        email: req.body.contactEmail,
        tel: req.body.tel,
        reason: req.body.reason,
        message: req.body.message,
        saveInfo: req.body.saveInfo ? true : false
    };
    // 自定义联系表单处理逻辑
    console.log('收到联系表单请求：', contactData);
    res.redirect('/');
});

注意事项 #

• Express 4.16+版本已内置urlencoded解析能力，无需单独安装body-parser包，可直接将原有引入替换为app.use(express.urlencoded({ extended: true }))
• 如果需要给用户展示提交成功的提示，可以在重定向时拼接查询参数，比如res.redirect('/?success=newsletter')，再在前端页面判断参数显示对应提示即可

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