Express请求处理-GET和POST请求参数的获取

分手后的思念是犯贱 2023-10-06 13:03 52阅读 0赞

## 场景 ##

Node的Web应用框架Express的简介与搭建HelloWorld：

[Node的Web应用框架Express的简介与搭建HelloWorld\_霸道流氓气质的博客-CSDN博客][Node_Web_Express_HelloWorld_-CSDN]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

### GET请求的参数的获取 ###

通过res.query获取

app.get('/',(req,res)=>{
        res.send(req.query);
    })

完整示例代码

//引入express框架
    const express = require('express');
    
    //创建网站服务器
    const app = express();
    app.get('/',(req,res)=>{
        res.send(req.query);
    })
    
    app.listen(3000, function () {
      console.log('Example app listening on port 3000!')
    })

运行项目，浏览器中输入带参数的请求url

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### POST请求参数的获取 ###

Express中接受post请求参数需要借助第三方包 body-parser

首先在项目目录下打开终端输入

npm install body-parser

或者

cnpm install body-parser

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

然后在app.js中引入

const bodyParser = require('body-parser');

然后在创建路由时

//拦截所有请求
    //extended:false 方法内部使用querystring模块处理请求参数的格式
    //extended:true 方法内部使用第三方模块qs处理请求参数的格式
    app.use(bodyParser.urlencoded({extended:false}))
    app.post('/add',(req,res)=>{
      //接收post请求参数
      res.send(req.body);
    })

完整示例代码

//引入express框架
    const express = require('express');
    const bodyParser = require('body-parser');
    //创建网站服务器
    const app = express();
    
    
    //拦截所有请求
    //extended:false 方法内部使用querystring模块处理请求参数的格式
    //extended:true 方法内部使用第三方模块qs处理请求参数的格式
    app.use(bodyParser.urlencoded({extended:false}))
    app.post('/add',(req,res)=>{
      //接收post请求参数
      res.send(req.body);
    })
    
    
    app.listen(3000, function () {
      console.log('Example app listening on port 3000!')
    })

为了测试post请求，在项目目录下新建post.html

<!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <form action = "http://localhost:3000/add" method="POST">
            <input type="text" name = "key">
            <input type="text" name = "value">
            <button type="submit">提交</button>
        </form>
    </body>
    </html>

在浏览器中打开post.html  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

输入内容点击提交

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

[Node_Web_Express_HelloWorld_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106650798
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200715233526252.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200715233613356.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200715233603115.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020071523360729.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70