案例一
- 将html文件中的form表单数据提交到Node中
index.html 文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form method="post" action="http://localhost:3000/">
<input name="username" type="text" placeholder="请输入用户名">
<br>
<input name="password" type="text" placeholder="请输入密码">
<input type="submit" value="Submit" >
</form>
</body>
</html>
- 建立服务器并监听3000端口
var http = require('http'); //引入http模块
var url = require('url')
var qs = require('querystring'); //引入querystring模块
var server = http.createServer(function (req, res) {
if (req.url == '/' && req.method == 'POST') {
var body = '';
req.on('data', function (chunk) {
body += chunk; //读取请求体
})
req.on('end', function () {
console.log(body); // 打印请求体
res.writeHead(200, {'Content-Type' : 'text/html'}); // 响应报文
;
console.log(qs.parse(body).username); //使用qs解析请求体
console.log(qs.parse(body).password);
res.end('<h1>hello world!</h1>')
})
}
}).listen(3000,() => {
console.log('heihei...')
});
- 打开html页面,在表单中输入对应的内容,点击Submit:
- 可以在控制台看到如下内容:
heihei...
username=zhangbing&password=123456
zhangbing
123456
其中的 username=zhangbing&password=123456 为请求体
使用querystring中的parse()方法可以解析请求体为:
zhangbing
123456
分别为表单提交的信息
案例2
const http = require('http')
const url = require('url')
const querystring = require('querystring')
const server = http.createServer()
server.on('request',(req,res) => {
const { pathname, query } = url.parse(req.url, true)
const method = req.method
if ( method == 'GET') {
if ( pathname == '/add') {
let add = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>添加用户</h3>
<form method="post" action="http://localhost:3000/post">
<div class="form-group">
<label>用户名</label>
<input name="name" type="text" class="form-control" placeholder="请填写用户名">
</div>
<div class="form-group">
<label>密码</label>
<input name="password" type="password" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<label>年龄</label>
<input name="age" type="text" class="form-control" placeholder="请填写邮箱">
</div>
<div class="form-group">
<label>邮箱</label>
<input name="email" type="email" class="form-control" placeholder="请填写邮箱">
</div>
<button type="submit" class="btn btn-primary">添加用户</button>
</form>
</div>
</body>
</html>
`;
res.end(add)
}
} else if ( method == 'POST') {
if ( pathname == '/post') {
let formData = ''
req.on('data', param => {
formData += param;
})
// post 参数接受完毕
req.on('end', async () => {
// console.log(formData) // name=123&password=123456&age=20&email=123%40123.com&hobbies=%E8%B6%B3%E7%90%83&hobbies=%E7%AF%AE%E7%90%83
console.log(querystring.parse(formData))
// [Object: null prototype] {
// name: '张兵',
// password: '123321',
// age: '22',
// email: '123@123.com'
// }
res.writeHead(200, {'Conten-Type':'text/html'}) // }
res.end('<h1>hello nodejs</h1>')
})
}
}
})
server.listen(3000,() => {
console.log('running...')
})
- 在浏览器地址栏输入:
http://localhost:3000/add
- 显示的表单页面如下图所示:
- 输入信息,并点击提交按钮:
- 浏览器响应如下图所示的页面
- 在命令行的控制台打印如下的内容:
[Object: null prototype] {
name: '张兵',
password: '123456',
age: '20',
email: '123@123.com'
}
总结
可见,借助 querystring.parse()方法确实可以得到表单post参数