zoukankan      html  css  js  c++  java
  • http协议里定义的四种常见数据的post方法

    原文 https://blog.csdn.net/charlene0824/article/details/51199292

    关于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);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    该代码搭建起了一个简单的server,在git bash中输入

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

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

    app.post('/urlencode',function(req,res){
    console.log(req.body);
    res.send("success");
    });
    1
    2
    3
    4
    在html中编写form表单,使用post方法发送请求

    <form action='/urlencode' method='post'>
    <input type='text' name='user' value='charlene'/>
    <input type='submit'>
    </form>
    1
    2
    3
    4
    当提交表单时,路由中的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>`
    1
    2
    3
    4
    5
    6
    以上的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);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    });

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

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

    xhr.setRequestHeader=("Content-Type":"application/json");
    1
    同时,请求信息的格式需要是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));
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    参考文献: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);

    }

  • 相关阅读:
    ICONS-图标库
    图形资源
    vue项目中,如果修改了组件名称,vscode编辑器会在引入修改组件的名字处提示红色波浪线 The file is in the program because:Imported via xxx Root file specified for compilation .
    接口在dev环境报跨域问题(has been blocked by CORS policy:Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header ispresent on the requested resource.),qa环境正常
    阿里云occ的图片文件URL用浏览器直接打开无法访问,提示This XML file does noe appear to have any style information associated with it. The document tree is shown below.
    vue 项目使用element ui 中tree组件 check-strictly 用法(父子不互相关联的反显情况)
    高德地图进行线路规划绘制标记点操作(vue)
    vue中实现拖拽调整顺序功能
    2021-01-22 浏览器相关知识
    2021-01-22 js 相关知识点
  • 原文地址:https://www.cnblogs.com/liujinyu/p/10910592.html
Copyright © 2011-2022 走看看