如何將數據從html發送到node.js

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
})

嵌套在form內的input標記用於收集用戶輸入。 您必須為數據指定name屬性，以便您可以在服務器上識別此數據。 你可以給它任何你喜歡的名字。 因此，例如，如果您想收集用戶的生日，請寫下name="user-birthday" 。 type="text"只是告訴瀏覽器呈現某種類型的樣式。

最后， button標記將允許用戶將表單發送到您的服務器。 給按鈕一個type="submit"告訴瀏覽器當用戶點擊按鈕時，應該發送表單。

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

就是這樣！ 這是處理表格的基礎知識。

但請注意，這種簡單的方法有很多缺點，您可能希望將來處理這些方法。 為此，我建議查看Javascript中使用的fetch()方法，或使用像Axios這樣的庫。 它們將使您的生活變得更加輕松

如何將數據從html發送到node.js

問題描述

2 個解決方案

解決方案1
6 已采納 2018-10-06 03:59:29

解決方案2
3 2018-10-06 03:18:13

如何將數據從html發送到node.js

問題描述

2 個解決方案

解決方案1 6 已采納 2018-10-06 03:59:29

解決方案2 3 2018-10-06 03:18:13

解決方案1
6 已采納 2018-10-06 03:59:29

解決方案2
3 2018-10-06 03:18:13