获取POST请求的参数

案例一

  • 将html文件中的form表单数据提交到Node中
    index.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('

hello world!

'
) }) } }).listen(3000,() => { console.log('heihei...') });
  • 打开html页面,在表单中输入对应的内容,点击Submit:
    获取POST请求的参数_第1张图片
  • 可以在控制台看到如下内容:
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 = `
                
                
                
	            
	            用户列表
	            
                
                
	                

添加用户

`
; 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: '[email protected]' // } res.writeHead(200, { 'Conten-Type':'text/html'}) // } res.end('

hello nodejs

'
) }) } } }) server.listen(3000,() => { console.log('running...') })
  • 在浏览器地址栏输入:
	http://localhost:3000/add
  • 显示的表单页面如下图所示:
    获取POST请求的参数_第2张图片
  • 输入信息,并点击提交按钮:
    获取POST请求的参数_第3张图片
  • 浏览器响应如下图所示的页面
    获取POST请求的参数_第4张图片
  • 在命令行的控制台打印如下的内容:
[Object: null prototype] {
     
  name: '张兵',
  password: '123456',
  age: '20',
  email: '[email protected]'
}

总结

可见,借助 querystring.parse()方法确实可以得到表单post参数

你可能感兴趣的:(Node.js,vue,ajax,javascript,web,js)