node02-如何在服务器获得浏览器使用post提交的数据

我们用nodejs搭建好服务器后，浏览器发送的请求可以是GET请求或者POST请求，服务器想要得到请求中的一些数据,可以通过以下几种方式获得：

我们在这里介绍浏览器以POST方式请求，可以使用以下两种方式：

1. 使用request对象的data和end事件获取

data事件可以接收浏览器传递过来的参数：由于有可能参数比较多，浏览器可能会作多次将参数提交过来，所以我们需要将参数进行拼接。

chunk：就是接收到的参数：

什么时候将参数接收完呢？可以使用req的另一个事件，end事件来结束参数的接收

例子：

要求：需要获取index页面提交过来的用户名和性别。并打印在控制台

Index页面：

   <form action="/addPost" method="POST">
        <table>
            <tr>
                <td>姓名</td>
                <td><input type="text" name="name"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="gender" value="男">男  
                    <input type="radio" name="gender" value="女">女
                </td>
            </tr>
            <tr>
                <td></td>
                <td><button>新增</button></td>
            </tr>
        </table>
    </form>

App.js页面：

       // 获得浏览器通过post方式提交的数据
        // 第一种,使用request对象自带的"data"和"end"事件获取
        var str="";
        req.on("data",function(chuck){
            str += chuck;
        })
        req.on("end",function(){
            str = decodeURI(str);
             console.log(str);

        })

输出结果：

name=鸣人&gender=男

代码解释：index页面form表单提交数据后，服务器端app.js调用data事件获得数据块，并拼接到str中，但是我们并不知道数据块什么接收完成，所有我们调用了end事件用来监听，如果数据块接收完成后，打印str,但是如果直接打印的话，可以看到str接收的数据都是Buffer数组类型的，所以我们需要使用decodeURI进行解码。

但是解码后得到的数据是字符串形式，不利于我们进行后续操作，我们可以引入nodejs的核心模块url，url的parse方法可以对url字符串进行拆分成对象形式。所以app.js代码优化：

var uurl = require("url");

...
      // 获得浏览器通过post方式提交的数据
        // 第一种,使用request对象自带的"data"和"end"事件获取
        var str="";
        req.on("data",function(chuck){
            str += chuck;
        })
        req.on("end",function(){
            str = decodeURI(str);
            //  console.log(str);
            // 拼接？号，变成url中的search格式
            var data = uurl.parse("?"+str,true).query;
            console.log(data);
        })

输出结果：

{ name: '鸣人', gender: '男' }

2.使用第三方模块formidable

formidable：接收浏览器上传过来参数：

字段：fields

文件: files

帮助我们接收浏览器上传过来的文件，并且将文件保存在path路径下面

例子：

依旧是获得用户信息，在app.js中使用 formidable,该方法会转换请求中所包含的表单数据，callback会包含所有字段域和文件信息。

步骤：下载formidable npm i formidable

引包 var formidable = require(“formidable ”);

实例化一个对象 var form = new formidable.IncomingForm();

调用方法 form.parse();

parse方法参数:

req:请求报文对象

callback:回调函数，有三个参数：err,fields,files

// err：错误对象
// fields：字段，属性 {name: "李白","gender": "男"}

// files：文件

App代码如下：

var formidable = require("formidable");

...
var form = new formidable.IncomingForm();
        form.parse(req,function(err,fields,files){
           var obj={
               name:fields.name,
               gender: fields.gender
            }
            console.log(obj);
        })

打印结果如下：

{ name: '卡卡西', gender: '男' }

结果得到的是一个对象，并不需要再进行二次转换。

以上两种方法总结：

两种方法都可以作为接收 post 提交过来的数据

因为上传过来的文件中有一个图片文件，而我们通过data和end事件确实可以接收到参数，但是接收到以后处理起来太麻烦了，建议使用formidable。

node02-如何在服务器获得浏览器使用post提交的数据

猜你喜欢