xhr的send方法以及node如何处理get和post数据

时间:2023-03-08 16:54:08

起因:看了阮一峰老师的关于上传文件的文章,进行测试,在使用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' }
};