zoukankan      html  css  js  c++  java
  • xhr的send方法以及node如何处理get和post数据

    起因:看了阮一峰老师的关于上传文件的文章,进行测试,在使用xhr对象的send方法时遇到问题。

    遇到的问题是使用send方法传送过去的数据,在node后台无法接收,经过很多次测试,怀疑是不是send与node不兼容导致。

    所以使用了jq的ajax方法进行测试,

    $("#sub").click(function(){
            $.ajax({
                url:"/upload",
                data:"foo=123",
                type:"POST"
            })
        })

    发现post过去的数据可以使用req.body接收。

    因为jq的ajax方法的原生便是xhr对象,所以基本排除send方法与node不兼容的说法。

    之后查阅资料发现,原来使用send方法时,如果是get请求则直接写open和send即可,

    但是假设是post方法传数据给后台,则需要加

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

    否则post过去的数据无法被正常接收。

    补充:如果使用get方法,基本用法应该如下:

     var xhr=new XMLHttpRequest();
     xhr.open("GET","upload?username=qiangzi&password=123";
    xhr.send(null);

    其中的url可以拼接字符串从而达到传参。

    后台的node接收get数据如下:

    var url=require("url");
    var querystring=require("querystring");
    
    exports.upload=function(req,res){
    
        var body=req.url;
        //得到的是一段字符串
        //  /?username=qiangzi&password=123
    
        var urlObj=url.parse(body);
        //把url解析成为对象
        //Url {
        //    protocol: null,
        //    slashes: null,
        //    auth: null,
        //    host: null,
        //    port: null,
        //    hostname: null,
        //    hash: null,
        //    search: '?username=qiangzi&password=123',
        //    query: 'username=qiangzi&password=123',
        //    pathname: '/',
        //    path: '/?username=qiangzi&password=123',
        //    href: '/?username=qiangzi&password=123' }
        
        var queryStr=urlObj.query;
        //获得传值部分
    
        //由于传的值是字符串,所以想办法变成对象,此处使用的是node自带的querystring方法,需引入
        var queryObj = querystring.parse(queryStr);
        //切割成对象之后我们就可以获取我们想要的部分.
      console.log(queryObj)

      //{ username: 'qiangzi', password: '123' }
    };

    post方法:

    var xhr=new XMLHttpRequest();
    xhr.open("POST","upload");
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send("user=qiangzi");

    后台接收post数据:

    exports.upload=function(req,res){
        console.log(req.body)
      //{ user: 'qiangzi' } };
  • 相关阅读:
    OpenCV教程(转自:浅墨_毛星云博客)
    基于聚类的“图像分割”(python)
    ubuntu同时装有MXNet和Caffe框架
    FCN用卷积层代替FC层原因(转)
    windows下安装TensorFlow(CPU版)
    python语法
    Deep Visualization:可视化并理解CNN(转)
    非局部均值(Nonlocal-Mean)
    转——深度学习之BN算法(Batch Normailization)
    数组和循环的应用
  • 原文地址:https://www.cnblogs.com/jelly7723/p/5485635.html
Copyright © 2011-2022 走看看