如何将数据从 html 发送到 node.js答案

【问题标题】：How to send data from html to node.js如何将数据从 html 发送到 node.js
【发布时间】：2019-03-11 12:43:39
【问题描述】：

我是网络语言的新手，所以如果我的问题很愚蠢，请原谅。基本上我正在尝试将数据从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>

【问题讨论】：

到目前为止你写了哪些服务器端代码？
以上代码是客户端的。它将与另一台称为服务器软件的计算机上的一段代码进行通信，该计算机在服务器上运行。 Node.JS 允许快速创建 http(s) 服务器，其中 php 通常作为 apache Web 服务器的一部分作为整个服务器的动态脚本元素执行。总结一下，您将寻找一个 node.js http 服务器示例。

标签： javascript html node.js

【解决方案1】：

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

这是最简单的：

您可以像在示例中显示的那样直接使用 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 这样的库。他们会让你的生活更轻松

【讨论】：

【解决方案2】：

我强烈建议使用像 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>

【讨论】：

恕我直言，它非常好。我喜欢快递，我认为你写的东西也应该有效 - 这就是为什么我要投票
非常感谢您的出色回答先生，但您能告诉我body-parser 的用途是什么
body-parser 曾经是 Express 框架的一部分，但从 v4 开始，它已被弃用，现在它作为单独的 NPM 包提供。就像听起来一样，Node.js 正文解析 middleware。 HTTP 消息的消息正文（如果有）用于携带该请求/响应的 payload 正文。所以req.body 保存了作为POSTrequest 的一部分从客户端发送的参数。通过使用它，您可以访问其属性（例如，fname 通过req.body.fname）。它就是这样做的，它解析请求的正文并允许您获取所需的数据。
body-parser 提取传入请求流的整个主体部分并将其公开在req.body 上。这个body-parser模块解析使用HTTP POST请求提交的JSON, buffer, string, and/ or URL encoded data。我希望这是有道理的？！ :) 以供将来参考，请访问他们的docs。
嗨@Bigga_HD 非常感谢您的回复。但是对于我发送的每个参数，我都会不断收到“未定义”。你能看到并告诉我为什么吗？提前致谢