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' } };
  • 相关阅读:
    Linux下如何查看版本信息
    linux的top命令参数详解
    浅谈Linux内存管理机制
    python3 判断字符串是否为纯空格组成的方法
    python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
    python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
    python3 list列表随机选取一个元素、随机选择一个user-agent
    windows系统中,在当前目录下打开cmd命令行的两种方法
    name 'reload' is not defined解决方法
    Vue.js05:vue内联样式
  • 原文地址:https://www.cnblogs.com/jelly7723/p/5485635.html
Copyright © 2011-2022 走看看