Question

我是网络语言方面的新秀，所以如果我的问题很愚蠢，请原谅。基本上，我正在尝试将数据从html-form传递到node.js服务器，但是即使在google中搜索了很多之后，我也没有任何相关的例子。所以，有人可以帮我学习这个东西吗？

我发现以下示例用于将数据解析到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>

Answer 1

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

Answer 2

您可以通过以下两种方法来解决问题。

这是最简单的：

您可以像示例中一样直接使用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"以使节点服务器知道我们正在发出发布请求。如果将Express用作Web服务器框架，则需要配置路由以处理发帖请求，如下所示：

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

嵌套在input中的form标签用于收集用户输入。您必须为数据分配一个name属性，以便可以在服务器上识别此数据。您可以给它任何喜欢的名字。因此，例如，如果您想收集用户的生日，则输入name="user-birthday"。 type="text"只是告诉浏览器呈现某种类型的样式。

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

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

就是这样！那是处理表格的基础。

但是请注意，这种简单的方法有很多缺点，您将来可能需要解决。为此，我建议查看Javascript中使用的fetch()方法或使用Axios之类的库。它们将使您的生活更加轻松

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

2 个答案: