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

Question

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

17

我是一个 web 语言的新手，如果我的问题很愚蠢，请原谅。基本上，我正在尝试将数据从 html-form 传递到 node.js 服务器，但即使在谷歌上搜索了很多，也找不到任何相关的示例。所以，有人可以帮助我学习这个吗？

我找到了下面这个示例，用于解析数据到 php 脚本，那么我该如何调整此代码以将数据传递到 node.js 脚本。

代码：

<!DOCTYPE html>
<html>
<body>

<form action="/action.php" method="get" target="_blank">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
 </form>

<p>Click on the submit button, and the input will be sent to a page on the server called "/action_page.php".</p>

- coder

你目前已经编写了哪些服务器端代码？ - Paul

以上代码是客户端代码。它将与运行在服务器上的名为服务器软件的另一台计算机上的一段代码进行通信。Node.JS允许快速创建http(s)服务器，而php通常作为整个服务器的动态脚本元素在apache web服务器中执行。总之，您将寻找一个node.js http服务器示例。 - Patrick Sturm

2个回答

8

你有几种不同的方法来解决你的问题。

以下是最简单的方法：

你可以像你在示例中展示的那样直接使用 HTML 表单。但你需要了解它在幕后所做的事情。所以我会给你一个快速的解释。

这是你需要编写的基本 HTML 文件：

<!DOCTYPE html>
<html>
  <body>
    <form action="/your-node-server-route-name" method="POST">
     <input name="give-me-a-name" type="text" />
     <button type="submit">Send This Bad Boy To The Server</button>
    </form>
  </body>
</html>

所以这是在发生什么。在form标签中，action定义了您希望将从用户那里收集到的数据发送到哪个位置。这是处理此数据的路由的URL，该路由在您的节点服务器上设置（注意：这可以是任何服务器，不仅仅是节点）。因此，如果您有一个正在运行的服务器位于http://localhost:3000，并且处理此数据的路由是/handle-form-data，则您应将其写为action="http://localhost:3000/handle-form-data"就像这样。如果您的节点服务器也提供此HTML页面，则可以使用相对路径指向您的路由，如action="/handle-form-data"。 method定义了提交表单时要使用的HTTP方法。对于发送数据，您要使用POST方法。因此，我们编写method="POST"来让节点服务器知道我们正在进行post请求。如果您使用Express作为Web服务器框架，则需要配置路由以处理post请求，如下所示：

app.post("/handle-form-data", (req, res) => {
  // Do Something in Node here
})

在form内部嵌套的input标签用于收集用户输入。您必须为数据分配一个name属性，以便在服务器上识别这个数据片段。您可以随意赋予它任何名称。例如，如果您想收集用户的生日，则写入name="user-birthday"。 type="text"只是告诉浏览器呈现某种类型的样式。

最后，button标签允许用户将表单发送到您的服务器。为按钮设置type="submit"，告诉浏览器当用户单击按钮时应该发送表单。

...............................................

就是这样！这就是处理表单的基础知识。

但请注意，这种简单方法存在很多缺点，您可能需要在未来加以解决。为此，建议查看Javascript中使用的fetch()方法，或使用像Axios这样的库。它们会让您的生活变得更加轻松。

- Z_z_Z

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dzenis H. · Accepted Answer

我强烈建议使用框架，例如 Express 来实现更加愉悦的 Node.js 交互体验。因此，您需要做的第一件事是安装它：

npm install express

我的例子中，我将安装一个名为body-parser的额外中间件。

npm install body-parser  // this allows us to access req.body.whatever

接下来，制作一个简单的服务器来处理你的 POST 请求，就像这样：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

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

app.post('/example', (req, res) => {
  res.send(`Full name is:${req.body.fname} ${req.body.lname}.`);
});

const port = 8080;

app.listen(port, () => {
  console.log(`Server running on port${port}`);
});

这是我们的HTML表单：所以我们将数据发送到我们的localhost [http:// 127.0.0.1]，端口为8080，路由为/example --> 所有这些都在我们的小Express服务器中配置。

<form action="http://localhost:8080/example" method="POST">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
 <button type="submit">Send to backend</button>
</form>