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

xhr的send方法以及node如何处理get和post数据的更多相关文章

  1. 【转】Ajax中send方法参数的使用(get/post)

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...

  2. Ajax中send方法参数的使用

    一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : var url = " ...

  3. Ajax中send方法的使用

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...

  4. Ajax XMLHttpRequest对象的三个属性以及open和send方法

    (1)onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行 ...

  5. Python的生成器send()方法 & yield_from

    生成器对象是一个迭代器.但是它比迭代器对象多了一些方法,它们包括send方法,throw方法和close方法.这些方法,主要是用于外部与生成器对象的交互.本文先介绍send方法. send send方 ...

  6. 执行发送邮件Send方法时,报错:邮箱不可用。 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com

    .net代码在执行发送邮件Send方法时,往往出现这个的报错: 邮箱不可用. 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com 这个问题应该是smtp的设置问 ...

  7. C# socket通讯 send方法记录

    由于本人是Java入门的开发,在C#开发中遇到的问题,在此记录一下: 1.client端的send方法不管发送出去没发送出去,总是显示发送出去. 查资料得知,send方法是将数据发送到缓存区,并不是直 ...

  8. 关于python中生成器之Send方法

    #send主要是用于外部与生成器对象的交互def func1(): # 生成器函数 print("ok1") x = 10 # 函数内局部变量x赋值为10 print(x) x = ...

  9. [转]SendKeys.Send 方法

    SendKeys.Send 方法 向活动应用程序发送击键. 转载自: https://msdn.microsoft.com/zh-cn/library/system.windows.forms.sen ...

随机推荐

  1. BZOJ 1601 [Usaco2008 Oct]灌水

    1601: [Usaco2008 Oct]灌水 Time Limit: 5 Sec  Memory Limit: 162 MB Description Farmer John已经决定把水灌到他的n(1 ...

  2. 雪佛兰Suburban_百度百科

    雪佛兰Suburban_百度百科 雪佛兰Suburban

  3. UVA 10057 A mid-summer night's dream. 仲夏夜之梦 求中位数

    题意:求中位数,以及能成为中位数的数的个数,以及选择不同中位数中间的可能性. 也就是说当数组个数为奇数时,中位数就只有一个,中间那个以及中位数相等的数都能成为中位数,选择的中位数就只有一种可能:如果为 ...

  4. 获取系统的emoji表情定制键盘

    首先 ,想要获取系统的表情,要首先知道表情对应的UTF8 的编码方式,我将其中一部分的图片展示出来 ,然后用UIButton 排列,iOS 7后又增加了300多个表情符号,这些都可以百度查到,现在上代 ...

  5. ASP.NET MVC 5 学习教程:添加查询

    原文 ASP.NET MVC 5 学习教程:添加查询 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...

  6. 进入MFC讲坛的前言(三)

    MFC中的窗口创建及窗口消息映射 我经常碰到有人问我有关窗口创建的问题,他们经常把用HWND描述的系统窗口对象和用CWnd描述的MFC的窗口对象混淆不清.这两者之间是紧密联系在一起的,但是MFC为了自 ...

  7. What’s New in Python 2.7 — Python 3.4.0b2 documentation

    What's New in Python 2.7 - Python 3.4.0b2 documentation What's New in Python 2.7¶

  8. poj1887 Testing the CATCHER

    Testing the CATCHER Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 13968   Accepted: 5 ...

  9. android 应用静默自启动的解决方法

    一个apk完全的自动静默启动目前不能实现,所以就用到了Activity的一个方法activity.moveTaskToBack(boolean),这个方法就是可以退出应用到后台而不是finish()退 ...

  10. 距离变换DT

    距离变换:计算区域中的每个点与最接近的区域外的点之间距离,把二值图象变换为灰度图象. 对于目标中一个点,距离变换的定义为改点与目标边界最近的距离. 目标点离边界约近则值越小,转换的点越暗:越远,值越大 ...