HTML Node.js – 如何将数据从HTML发送到Express

在本文中，我们将介绍如何使用HTML和Node.js中的Express框架将数据从HTML发送到Express服务器。HTML是用于构建网页的标记语言，而Express则是一款流行的Node.js框架，用于构建Web应用程序。

阅读更多：HTML 教程

创建HTML表单

要将数据从HTML发送到Express，我们需要在HTML页面上创建一个表单。表单可以包含各种输入字段，例如文本框、复选框、单选按钮等。用户可以在表单中输入数据，并将其提交给服务器。

下面是一个简单的HTML表单示例：

<!DOCTYPE html>
<html>
<head>
  <title>发送数据到Express</title>
</head>
<body>
  <h2>请填写以下信息：</h2>

  <form action="/submit" method="POST">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required><br><br>

    <input type="submit" value="提交">
  </form>
</body>
</html>

在上面的例子中，我们创建了一个包含两个输入字段（姓名和邮箱）和一个提交按钮的表单。表单的 action 属性指定了提交表单时要发送到的URL（在这里是 "/submit"），method 属性指定了使用的HTTP方法（在这里是POST方法）。

配置Express服务器

接下来，我们需要在Node.js中使用Express来配置服务器，并处理来自HTML表单的数据。

首先，我们需要使用npm安装Express：npm install express。

然后，我们创建一个名为 server.js 的文件，并编写以下代码来配置Express服务器：

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

app.use(express.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;

  // 在这里处理接收到的数据
});

app.listen(port, () => {
  console.log(`服务器正在监听端口 ${port}`);
});

在上面的代码中，我们导入了Express并创建了一个服务器实例。express.urlencoded() 中间件用于解析传入请求的URL编码数据。我们使用 app.post() 方法来处理表单提交的数据，这个方法接收两个参数：请求对象和响应对象。我们可以使用 req.body 对象来获取通过表单发送的数据。

在这个简单的例子中，我们只是打印了接收到的数据到控制台，你可以根据需要来自定义处理逻辑。

使用模板引擎

通常，我们使用模板引擎来在服务器端渲染HTML页面，并将接收到的数据嵌入到页面中。这样可以方便地动态生成HTML内容。

在本例中，我们将使用EJS作为我们的模板引擎。要使用EJS，我们需要首先使用npm安装它：npm install ejs。

接下来，我们需要修改我们的 server.js 文件，以便使用EJS来渲染HTML页面：

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

app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;

  // 渲染名为 "submit.ejs" 的模板，并将数据传递给它
  res.render('submit', { name: name, email: email });
});

app.listen(port, () => {
  console.log(`服务器正在监听端口 ${port}`);
});

创建一个名为 submit.ejs 的文件，其内容如下：

<!DOCTYPE html>
<html>
<head>
  <title>提交成功</title>
</head>
<body>
  <h2>提交成功！</h2>

  <p>您的姓名是：<%= name %></p>
  <p>您的邮箱是：<%= email %></p>
</body>
</html>

在这个例子中，我们使用了 <%= %> 标签来嵌入从HTML表单接收到的数据。当请求 /submit URL时，服务器将渲染 submit.ejs 模板，并将数据传递给它。然后，渲染后的HTML将作为响应发送回客户端。