• nodejs中req.body对请求参数的解析问题


    首先,先了解一下关于http协议里定义的四种常见数据的post方法,分别是: 
    application/www-form-ulrencoded 
    multipart/form-data 
    application/json 
    text/xml

    Express依赖bodyParser对请求的包体进行解析。默认支持application/json,application/www-form-urlencoded,multipart/form-data.单数对xml没有支持。需要自己代码来实现

    • www-form-urlencoded

    http默认的post请求是这种方式,比如写一个<form>...<input type="submit/></form>.form表单里面的submit按钮默认就是这种www-form-urlencoded方式提交的

    Node.js下使用Express接收这种提交方式需要使用body-parse插件支持,Express和body-parser的依赖关系在4.0以下版本和4.0以上版本是不同的

    var express=require("express);
    var bodyParser=require('body-parser');
    
    var app=express();
    var server=require('http').createServer(app);
    
    app.use(bodyParser.urlencoded({extended:true}));
    
    var PORT=process.env.PORT||3008;
    server.listen(PORT);
    

    该代码搭建起了一个简单的server,在Git bash中输入

    $node app
    

    运行起来,就可以接收post的www-form-urlencoded类型的参数

    我们在上面的代码中加上一个路由(该路由需要放在监听端口的前面)

    app.post('/urlencode',function(req,res){
        console.log(req.body);
        res.send("success");
    });
    

    在html中编写form表单,使用post方法发送请求

    <form action='/urlencode' method='post'>
    <input type='text' name='user' value='charlene'/>
    <input type='submit'>
    </form>
    

    当提交表单时,路由中的req.body取得请求信息,并通过res.send方法将响应信息发送给客户端

    • form-data

    该数据类型也是常见的提交数据的方式,和上面不同的是form表单里需要有enctype标识。即我们在上传文件时,需要爱form标签中做这样的标识: 
    <form enctype="multipart/form-data"></form>

    如果是通过ajax方法提交表单,可以XHR2的FormData方法提交处理上传文件的表单。例如表单中含有上传的文件和其他需要提交的字段

    `<form method="post" id="form-article">
    <label>文章标题:</label>
    <input type="text" name="title" placeholder="请输入标题" class="text-input"></input>
    <label>文章封面:</label><input  type="file" name="postImg" value="上传图片" id="upload">
    <input type="submit" >
    </form>`
    

    以上的form表单中,含有需要提交的文章标题字段和文章封面的图像上传。当使用ajax实现表单提交时,需要使用xhr2中的FormData类型。 
    在下面的代码中,result为将表单提交的字段序列化的结果,为一个key=value形式的字符串。

    var upload=document.getElementById("upload");
    var formD=new FormData();
    for(var i = 0; i < result.length; i++){
        var val = result[i].split("=");
        formD.append(val[0],val[1]);
    }
    //如果上传上传的图片不为空,取出上传的图片内容
    if(upload.files[0]){
        formD.append("file",upload.files[0]);
    }
    ajax("post","/upload1",null,formD,function(res){
        console.log(res);
        }
    

    ajax为自己封装的ajax发送请求的方法,想了解此方法 见附录

    使用nodejs处理form-data数据,需要引入中间件multer或connect-multiparty,这里我使用multer中间件 关于multer中间件的安装及相关方法及属性,请参见我的上一篇博客

    在路由文下,编写form表单请求路由时处理的功能

    var upload=require('multerUtil');
    app.post('/upload1',upload.single("file"),function(req,res){
    console.log(req.body);//req.body中存放一般字段中存在的字段值
    //将信息存入文章数据库
    console.log(req.file);//req.file中存放上传的文件信息
    
    var post = new Post("cheng", req.body.title, req.body.tags,req.body.post,req.body.cates,req.file.path);
      post.save(function (err) {
      console.log(post);
      if (err) {
    
        console.log("error");
    
      }
    
     res.send({
                user: "cheng",
                title: req.body.title,
                tags: req.body.tags,
                post: req.body.post,
                cates: req.body.cates
                 });
    });
    

    });

    *注:multerUtil为引入multer中间件,并设置中间件的storage后返回的中间件,设置方法请参照我的上一篇博客

    • application/json

    bodyParser支持此类参数的解析。不过如果需要发送json数据,需要对发送请求的请求头设置,如果是ajax上传,设置请求头方法如下

    xhr.setRequestHeader=("Content-Type":"application/json");
    

    同时,请求信息的格式需要是json字符串格式,如果是json格式,需要通过JSON.stringify()方法将json格式的数据转化为json字符串格式的数据进行传输,后台node.js 在相应的路由下通过req.body接收请求的信息。

    • text/xml 
      这种请求类型不是特别常见,body-parse默认也不解析这种数据格式,目前腾讯、微信在使用这种数据交换格式,node.js中只能自己编写代码处理,把请求体参数按照字符串读取出来,然后使用xml2json包吧字符串解析成json对象。

    首先还是使用body-parse得到字符串,然后再转化

    xml格式请求需要指定http请求头content-type=text/xml

    利用req上定义的事件data来获取http请求流,end事件结束请求流的处理

    利用xml2json把上面得到的请求参数流转化为json对象

    首先需要安装xml2json

    $npm install xml2json
    
    
    var xml2json=require('xml2json');
    
    app.post('/xml',function(req,res){
    req.rawBody='';
    var json={};
    req.setEncoding('utf8');
    req.on('data',function(req,res){
    req.rawBody+=chunk;
    });
    req.on('end',funciton(){
    json=xml2json.toJson(req.rawBody);
    res.send(JSON.stringify(json));
    });
    });
    

    参考文献:node.js下依赖Express实现post 4中方式提交参数

    附录:ajax封装的方法

    //创建xhr对象
    function createXHR(){
        if(typeof XMLHttpRequest!="undefined"){
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject!="undefined"){
            if(typeof arguments.callee.activeXString!="string"){
                var versions=[
                    "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"
                ],
                i,len;
                for ( i = 0,len=versions.length; i < len; i++) {
                    try{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString=versions[i];
                        break;
                    }catch(ex){
    
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        }else{
            throw new Error("no XHR Object available");
        }
    
    }
        /**
                 * ajax请求的方法
                 * @param  {string}   met      发送请求的类型 值为'post'或‘get’等ajax能接受的请求类型
                 * @param  {string}   url      请求的url
                 * @param  {string/json/formdata}   mes      发送请求时的请求信息
                 * @param  {Function} callback 请求成功之后需要调用的回调函数
     * @return 处理请求后的结果
     */
    var ajax=function(met,url,mes,callback){
        var xhr=createXHR();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==1){
                console.log("writing");
            }
            if (xhr.readyState==4) {
                if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
                    callback(xhr.responseText);
    
                }else{
                    console.log("request was unsuccessful:"+xhr.status);
                }
            }
        }
        xhr.open(met,url,true);
        xhr.send(mes);
    
    }
  • 相关阅读:
    Java中参数传递时值传递的机制分析
    掰碎了讲中文编码
    掰碎了讲换行符和回车符
    创建父子控制器
    分页(进行封装处理)
    五:面向对象的三大特性:封装、继承、多态
    iOS9弹框的最新两种方式(解决控制器以外的类无法弹出的问题)
    各类报错汇集
    NBA季后赛结果预测
    十:类的本质及isa指针和元类的简单介绍
  • 原文地址:https://www.cnblogs.com/winyh/p/6678082.html
Copyright © 2020-2023  润新知