起因:看了阮一峰老师的关于上传文件的文章,进行测试,在使用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‘ } };
时间: 2024-10-01 00:29:08