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' }
};
xhr的send方法以及node如何处理get和post数据的更多相关文章
- 【转】Ajax中send方法参数的使用(get/post)
Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...
- Ajax中send方法参数的使用
一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : var url = " ...
- Ajax中send方法的使用
Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...
- Ajax XMLHttpRequest对象的三个属性以及open和send方法
(1)onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行 ...
- Python的生成器send()方法 & yield_from
生成器对象是一个迭代器.但是它比迭代器对象多了一些方法,它们包括send方法,throw方法和close方法.这些方法,主要是用于外部与生成器对象的交互.本文先介绍send方法. send send方 ...
- 执行发送邮件Send方法时,报错:邮箱不可用。 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com
.net代码在执行发送邮件Send方法时,往往出现这个的报错: 邮箱不可用. 服务器响应为: 5.7.1 Unable to relay for xxx@xxx.com 这个问题应该是smtp的设置问 ...
- C# socket通讯 send方法记录
由于本人是Java入门的开发,在C#开发中遇到的问题,在此记录一下: 1.client端的send方法不管发送出去没发送出去,总是显示发送出去. 查资料得知,send方法是将数据发送到缓存区,并不是直 ...
- 关于python中生成器之Send方法
#send主要是用于外部与生成器对象的交互def func1(): # 生成器函数 print("ok1") x = 10 # 函数内局部变量x赋值为10 print(x) x = ...
- [转]SendKeys.Send 方法
SendKeys.Send 方法 向活动应用程序发送击键. 转载自: https://msdn.microsoft.com/zh-cn/library/system.windows.forms.sen ...
随机推荐
- Codeforces Round #250 (Div. 2)—A. The Child and Homework
好题啊,被HACK了.曾经做题都是人数越来越多.这次比赛 PASS人数 从2000直掉 1000人 被HACK 1000多人! ! ! ! 没见过的科技啊 1 2 4 8 这组数 被黑的 ...
- linux下安装greenplum
1. 下载 Greenplum Database 源代码 $ git clone https://github.com/greenplum-db/gpdb 2. 安装依赖库 Greenplum Dat ...
- 4.5 HOOK分发函数
4.5 HOOK分发函数 本节开始深入的探讨键盘的过滤与反过滤.有趣的是,无论是过滤还是反过 滤,其原理都是进行过滤.取胜的关键在于:谁将第一个得到信息. 黑客可能会通过修改一个已经存在的驱动对象(比 ...
- 【centos6 , 7】 网络原理、网络配置
第一部分:网络原理: 一.网络编址 (主要使用IP编址) 1.ip编址是一个双层编址方案,一个ip地址标识一个主机(或一个网卡接口) 2.现在应用最为广泛的是IPv4编址,已经开始逐渐向IPv6编址转 ...
- Google Code Jam Round 1A 2015 Problem B. Haircut 二分
Problem You are waiting in a long line to get a haircut at a trendy barber shop. The shop has B barb ...
- 432B - Football Kit
解题思路: 暴力绝对TLE 一个队伍穿主场球衣的次数 = 这个队伍的客场球衣颜色与其他队主场球衣颜色起冲突的次数 + (n - 1) #include <stdio.h> #include ...
- Chapter 8 工厂方法模式
工厂方法模式实现时,客户端需要决定实例化哪一个工厂来实现运算类,选择判断的问题还是存在的,也就是说,工厂方法把简单工厂的内部逻辑判断移到了客户端代码来进行.你想要加功能,本来是改工厂类的,而现在是修改 ...
- Qt中文件操作遇到的(变量,容器,结构体)
咳咳!总结了一下我在使用QT文件操作时所用到的,再接再厉!再接再厉!! 1.保存到文件: QFile file("test.txt"); if (!file.open(QIODev ...
- Android学习笔记:FrameLayout布局基础
FrameLayout布局的特点是:所有放在布局里的视图组件,都按照层次堆叠在屏幕的左上角,后面的视图组件覆盖前面的. 当然,组件本身是可以控制自己的内部布局的. 一种常见的场景是可以在FrameLa ...
- 修改Hadoop作业调度算法过程解析
最近几个星期一直在修改hadoop的计算能力调度算法,遇到了这样那样的问题. 我修改的版本是hadoop-0.20.2 第一步: 将hadoop的源码加载到eclipse中配置使用ant编译 第二步: ...