nodejs获取表单数据的三种方法实例
nodejs作为服务端语言，在开发中注册登录等需通过form表单向后端发送数据进行判断，那作为服务端语言的nodejs通过哪些方法可以接收调用form表单的post请求值呢。 常见的会用到以下三种，让我们对着例子看看具体用法。 后端我们使用express插件，需要对express有所了解的才便于阅读哦~ 1、首先npm初始化，下载express包，导入模块后创建服务对象 //导入express模块 const express = require("express"); // 创建服务器对象 const app = express();
### JavaScript源代码：Node.js 获取表单数据的三种方法实例
#### 一、概述
在Web开发中，Node.js作为一种流行的后端技术栈，经常被用于处理来自客户端的请求，尤其是涉及用户输入如注册和登录场景。这些场景下通常会使用HTML表单收集用户数据，并通过HTTP POST请求将数据发送到服务器端。Node.js通过不同的方法接收并处理这些表单数据，本文将详细介绍这三种方法，并提供具体的实现示例。
#### 二、环境准备
为了演示这些方法，我们首先需要设置一个基本的Node.js开发环境。确保已经安装了Node.js，然后按照以下步骤进行操作：
1. **项目初始化**：
```bash
npm init -y
```
2. **安装Express**：
```bash
npm install express --save
```
3. **导入Express模块并创建服务器对象**：
```javascript
const express = require("express");
const app = express();
```
#### 三、方法一：使用表单提交
在本方法中，我们将通过传统的HTML表单提交数据至服务器。用户填写完表单后，点击提交按钮，表单数据将以POST请求的形式发送给服务器端。
1. **HTML表单代码**：
```html
<form action="/todata" method="POST">
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="user" id=""></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" id=""></td>
</tr>
<tr>
<button type="submit">提交</button>
</tr>
</table>
</form>
```
2. **Node.js后端代码**：
```javascript
app.use(express.urlencoded({ extended: false }));
app.post("/todata", (req, res) => {
console.log(req.body);
res.send("提交成功");
});
```
- **使用`express.urlencoded()`中间件**：用于解析表单数据，这里的`{ extended: false }`参数表示不使用查询字符串库（qs）来解析URL编码的数据。
- **处理POST请求**：当收到/todata的POST请求时，使用`req.body`来获取表单数据。
#### 四、方法二：使用AJAX发送POST请求
另一种常见的方式是使用jQuery的`$.ajax()`方法发送POST请求。这种方式不需要页面刷新即可完成数据的提交，提高了用户体验。
1. **HTML与JavaScript代码**：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" id="inp1" placeholder="用户名">
<input type="text" id="inp2" placeholder="密码">
<button id="inp3">提交</button>
<script>
$("#inp3").on("click", function() {
let user = $("#inp1").val();
let password = $("#inp2").val();
$.ajax({
url: "todata",
type: "post",
data: { user, password },
success: (data) => {
alert(data);
}
});
});
</script>
```
2. **后端代码**：
```javascript
app.post("/todata", (req, res) => {
console.log(req.body);
res.send("提交成功");
});
```
- **使用`$.ajax()`**：构建POST请求，并将表单数据作为`data`参数传递。
- **后端处理**：与方法一相同，使用`req.body`获取数据。
#### 五、方法三：使用`serialize()`方法
对于表单元素，还可以利用jQuery提供的`serialize()`方法自动序列化表单中的所有字段，并将其作为POST请求的参数发送。
1. **HTML与JavaScript代码**：
```html
<form>
<input type="text" name="user" id="inp1" placeholder="用户名">
<input type="text" name="password" id="inp2" placeholder="密码">
<button id="inp3">提交</button>
</form>
<script>
$("#inp3").on("click", function() {
$.ajax({
url: "todata",
type: "post",
data: $("form").serialize(),
success: (data) => {
alert(data);
}
});
});
</script>
```
2. **后端代码**：
```javascript
app.post("/todata", (req, res) => {
console.log(req.body);
res.send("提交成功");
});
```
- **使用`$("form").serialize()`**：自动序列化表单数据。
- **后端处理**：与前两种方法相同。
#### 六、总结
以上三种方法分别展示了如何使用传统的HTML表单提交、AJAX异步请求以及`serialize()`方法来处理表单数据。每种方法都有其适用场景，开发者可以根据实际需求选择合适的方法。无论采用哪种方式，都需要确保服务器端能够正确解析并处理接收到的数据，以实现完整且高效的功能实现。
