在一个页面中使用express处理2个表单的post请求

Question

我在一个页面上有两个表单，时事通讯注册表单和联系表单。我想为使用节点和表达都做post请求。我该怎么做呢?

下面是论坛的html代码:

<!-- Newsletter signup Section -->
<section class="newsletter-section">
<form action="/" method="POST">
<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 href="#" class="btn-full btn-round newsletter-btn">Sign Me Up!</a>
</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">
<div class="name">
<div class="first-name">
<label for="first-name">First Name</label>
<input type="text" id="name" placeholder="First Name" />
</div>
<div class="last-name">
<label for="last-name">Last Name</label>
<input type="text" id="name" placeholder="Last Name" />
</div>
</div>
<div class="contact-info">
<div class="email">
<label for="email">Email</label>
<input type="email" id="email" placeholder="email" />
</div>
<div class="tel">
<label for="tel">Tel</label>
<input type="tel" id="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">Inqiries</option>
<option value="####">Other</option>
</select>
</div>
<div class="short-message">
<textarea id="message" rows="10" placeholder="Type a short message here"></textarea>
</div>
<div class="save-info">
<span>Save my info for next time</span>
<input type="checkbox" class="final-input" />
</div>
<div class="submit">
<button name="submit" class="btn-round">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>

node.js的代码如下:

const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');
const _ = require('lodash');
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
app.get('/', function (req, res) {
res.render('home', { homeContent: homeStartingContent, posts: posts });
});

这就是所有的代码。现在我想分别为每个表单添加post request。

Answer 1

您需要将每个表单元素的action参数设置为不同的URL(例如:/contact和/subscribe或任何你喜欢的)，然后在你的API中创建一个路由来处理每个请求。

目前，将action设置为"/"，您将两种形式的输出发送到后端相同的端点。

<form action="/subscribe" method="POST">...</form>
<form action="/contact" method="POST">...</form>

app.get('/', function (req, res) {
// Display the forms
res.render('home', { homeContent: homeStartingContent, posts: posts });
});
app.post('/subscribe', function (req, res) {
// Deal with the contents of the submitted subscription form
});
app.post('/contact', function (req, res) {
// Deal with the contents of the submitted contact form
});