比如,,我们在没有使用jquery的时候,没有$.post来让我们使用,那我们像下面这样直接发送:

var params1 = {
username: username,
passwrod: password
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
data = JSON.prase(data);
console.log(data);
}
}
xhr.open("POST","/url",true);
xhr.setRequestHeader('Content-Type', 'multipart/x-www-form-urlencoded; charset=UTF-8');
xhr.send(params1);

这样发送,后台是接受不到数据的,,因为数据藏在Request的body中,而不是表单中,

所以我们前端就要对数据进行序列化,像jquery一样,$.params 一样对json序列化,这样后台就可以收到了

就像这样:

var params1 = {
username: username,
passwrod: password
};
function $params(obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
data = JSON.prase(data);
console.log(data); }
}
xhr.open("POST","/url",true);
xhr.setRequestHeader('Content-Type', 'multipart/x-www-form-urlencoded; charset=UTF-8');
xhr.send($params(params1));

写下来,送给无知的自己。。

来自:http://news.17173.com/

ajax 之POST请求,参数序列化的更多相关文章

  1. 关于ajax提交表单参数序列化和时间戳转换

    ajax提交form表单, 序列化表单的参数 //var a = $("#addfm").serialize(); //将表单的内容序列化成为一个字符串 var a = $(&qu ...

  2. Ajax中Delete请求参数 后台无法获取的解决方法(Restful风格)

    方法一: 在ajax中写入data来传参时,直接把参数拼接到url后面 例如: $.ajax({ url: '/cyberspace/vrv/event/delete/1002?startTime=& ...

  3. Ajaxadr ajax跨域请求crossdomain

    最近工作需要用到ajax跨域请求参数,网上找很很久,最终得到解决之道.分享一下吧,希望能帮到各位 也许你已经发现在浏览器直接敲路径能获得对方提供接口的参数,而一到项目中Ajax请求却老是失败.原因是, ...

  4. ajax请求参数为中文乱码的情况

    解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...

  5. Ajax请求参数较长导致请求失败

    Ajax请求参数比较长,第5行参数大概1100个字符吧,是接口的请求报文. $.ajax({ type:"POST", url:"${ctx}/test.action?m ...

  6. 如果$.ajax函数迟迟得不到响应,那么最有可能出错的地方是请求参数写错了

    如下的$.ajax函数 $.ajax({ url: url,// 请求的地址 data:{id:id,pieceId:pieceId,pieceDesc:pieceDesc,actualStock:a ...

  7. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  8. 使用Typescript重构axios(二十八)——自定义序列化请求参数

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  9. Ajax请求参数到一个URL包含下划线或者v(_、v)

    Ajax请求参数到一个URL包含下划线或者v 初学者的我,在F12时,看到这个地址就会很奇怪,不理解什么东西 经过查找了解到浏览器默认开启缓存,该参数不是其他请求所必须的,把它去掉不影响数据的获取 h ...

  10. JQuery Ajax 请求参数 List 集合处理

    引言 JQuery Ajax 发送请求参数一般都是基本类型,比如 String.int:那么,请求参数如果是 List 集合应该如何处理呢? 情况一:Aajx 发送 List 类型请求参数 举例如下: ...

随机推荐

  1. Matlab实现单层感知机网络识别字母

    感知机网络的参数设置 % 具体用法: % net=newp(pr,T,TF,LF); % % pr: pr是一个R×2的矩阵,R为感知器中输入向量的维度(本例中使用35个字符表征一个字母,那么其维度为 ...

  2. Android Studio3.1.2编译时Java Compiler出错:Warning: Failed to parse host proxy3.bj...

    删除gradle.properties中的代理设置... #移除下面配置systemProp.http.proxyHost=proxy3.bj.petrochina systemProp.http.p ...

  3. Android 深入浅出 - Android系统启动过程

    Activity的类继承关系及跟踪Activity的启动 Android系统启动过程 https://study.163.com/course/courseLearn.htm?courseId=213 ...

  4. 整合mybaties 逆向生成 pojo mapper.xml

    第一步:配置properties 第二步:放入generatorConfig.xml文件  在总目录下  这个是生成工具 第三步:放入工具类,自动生成用的,  pom里面要加入6个依赖 第四步:运行u ...

  5. 判断素数(翁凯男神MOOC)

    从2到x-1测试是否可以整除 int isPrime(int x); int main(int argc, char **argv) { int x; scanf("%d",&am ...

  6. Numpy random arange zeros

    seed( ) 用于指定随机数生成时所用算法开始的整数值. .如果使用相同的seed( )值,则每次生成的随即数都相同: .如果不设置这个值,则系统根据时间来自己选择这个值,此时每次生成的随机数因时间 ...

  7. intellij idea 搜索功能快捷键

    intellij idea是一款超智能的编译器,因此在信息资源的搜索功能中给我们的用户提供了很大的帮助.同样作为java编译器的eclipse和myeclipse在搜索方面就比intellij ide ...

  8. url中传递中文参数时的转码与解码

    URL传递中文参数时的几种处理方式,总结如下: 1.将字符串转码:newString(“xxxxx”.getBytes("iso-8859-1"),"utf-8" ...

  9. datetime空值设置

    Cause: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Incorrect datetime value: '' for column ...

  10. 使用synchronized wait() notifyall() 实现简单的加减法同步 竞争抢答

    import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.co ...