在前端开发中，HTML 表单是一种重要的用户交互方式，通过表单用户可以提交数据以交互。然而，表单的数据提交方式是同步的，页面需要刷新以实现，这导致用户体验不够良好。而 Node.js 提供了基于异步的非阻塞 I/O，可以更好地处理表单数据。
将传统表单发送到服务器
Node.js 提供了内置的 HTTP 模块，可以实现向服务器发送 HTTP 请求。以下是一个简单的表单：
// javascriptcn.com 代码示例 <form method="post" action="/submit"> <label for="name">Name:</label> <input type="text" id="name" name="username" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Submit"> </form>
表单有三个输入框，分别是 username、email、password，它们的值将通过 POST 请求发送到服务器的 /submit 路径。接下来，我们使用 Node.js 监听路径为 /submit 的请求，并解析表单数据。
// javascriptcn.com 代码示例
const http = require('http');
const url = require('url');
const querystring = require('querystring');
const server = http.createServer((req, res) => {
// 解析请求url
const reqUrl = url.parse(req.url);
if (reqUrl.pathname === '/submit' && req.method === 'POST') {
let body = '';
// 解析表单数据
req.on('data', chunk => {
body += chunk.toString();
});
req.on('end', () => {
const formData = querystring.parse(body);
console.log(formData);
res.end(`<p>Username: ${formData.username}</p>
<p>Email: ${formData.email}</p>
<p>Password: ${formData.password}</p>`);
});
} else {
res.end(`
<h1>Submit Form</h1>
<form method="post" action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
`);
}
});
server.listen(8080);
console.log('Server is listening on port 8080...');代码解读：
- Node.js 的 http 模块创建了一个 HTTP 服务器。
- 如果请求的路径为 /submit 并且方法为 POST，就解析表单数据并返回已经解析后的数据。
- 表单数据是通过请求的 body 传输的，我们监听请求的 data 事件获取请求体，当请求结束时，我们使用 querystring 模块解析表单数据。
- 如果请求的路径不是 /submit 或请求方法不为 POST，就返回表单。
避免安全问题
从表单接收的数据需要进行安全验证，以避免潜在的攻击。以下是一些安全问题及应对方法：
- SQL 注入：用户可能会通过表单提交一些脚本，恶意执行SQL语句。对于这种情况，我们可以使用预编译的参数化查询，不使用字符串拼接。
- 跨站点脚本（XSS）攻击：用户可能会通过表单提交恶意脚本，攻击其他网站。我们可以使用一些库（如xss）防止这种攻击。
- CSRF 攻击：攻击者可能会通过其他站点伪造请求，攻击我们的网站。我们可以使用 CSRF token 等技术来防止这种攻击。
总结
在本文中，我们介绍了如何使用 Node.js 接收表单数据。我们使用了内置的 http 模块和 querystring 模块解析表单数据。另外，了解了一些安全问题并采取了对应的措施。Node.js 的能力不仅仅限于表单数据的接收，它也是一个很好的后台服务开发的工具。请继续学习，学会使用 Node.js 进行更多的开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65444d727d4982a6ebe2eba6