发表于: 2020-02-29 22:53:39
1 1791
今日完成
用Ajax方式提交表单,决定编码类型的是请求头中Content-Type
,不同的值对应不同的提交和回调处理方式。而且,在项目中我们会用到前端的库或者框架,他们对于不同的Content-Type
也有不同的参数写法,本文将以jQuery和AngularJS,加上XMLHttpRequest共三种方式为例,详细介绍不同Content-Type
的发送请求的方式。
本文考虑的Content-Type
类型,共有如下几种:
application/x-www-form-urlencoded
multipart/form-data
text/plain
application/json
text/xml
下面将介绍XMLHttpRequest、jQuery和AngularJS三种异步提交方式,及对应的每一种Conten-Type类型。
XMLHttpRequest 方式
XMLHttpRequest对象用于向后端收发数据请求,现代浏览器都支持(IE要用ActiveXObject实现相同功能,本文就不讨论了)。
后续代码将假设已经获得了XMLHttpRequest对象,其名为req
。下面将介绍XMLHttpRequest对象用常见的五种Content-Type
发送数据的方式。
application/x-www-form-urlencoded
这种Content-Type
要求数据按照key1=value1&key2=value2
的格式发送给后端,且其中的特殊字符需要转义成%HH
的形式。
首先,需要用encodeURIComponent()
函数编码表单数据,代码如下。
/* data参数为表单数据组成的对象,dataToSend为待发送给后端的数据 */var tempArr = [];for (var key in data) { if (data.hasOwnProperty(key)) {
tempArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
}var dataToSend = tempArr.join('&');
接着,设置请求头部的Content-Type
,发送数据,代码如下。
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');req.send(dataTosend);
multipart/form-data
这种Content-Type
类型多用来提交文件,我们采用HTML5的FormData对象来构建提交的数据。FormData对象的浏览器支持情况见:FormData对象的浏览器支持情况。
基本上现代浏览器都支持,IE11以下不支持,不支持的建议用ajaxForm之类的jquery的文件提交插件吧。
首先,用FormData对象构建欲提交的数据,代码如下。
/* data参数为表单数据组成的对象,dataToSend为待发送给后端的数据 */var dataToSend = new FormData(); // HTML5对象, IE11以下不支持for (var key in data) { if (data.hasOwnProperty(key)) {
dataToSend.append(key, data[key]);
}
}
// dataToSend就是FormData对象,可直接传给后端
dataToSend
接着,直接发送给后端,注意这种类型的发送方式,不能设置请求头部的Content-Type
,应交给浏览器来处理(设定Boundary等工作)。
req.send(dataToSend);
text/plain
如果请求头部没有设定Content-Type
,且数据既不是FormData
也不是XML Document
(将在xml小节中介绍),则Content-Type
默认为text/plain
。
这种方式的代码很简单,直接发送字符串即可,代码如下。
req.send('...(此处是字符串格式的数据)');
application/json
JSON格式的数据,后端和各种移动端都很方便处理,用这种MIME类型时,需要将数据对象转换成JSON串。
首先,转换数据成JSON串;然后,设定请求头部的Content-Type
,就可以发数据了。代码如下。
/* data参数为表单数据组成的对象 */req.send( JSON.stringify(data) );
text/xml
目前没有遇到过要用XML的情况,大部分都可用JSON代替,为了完整起见,我也顺便总结一下。
首先,构建XML文档对象,存入表单数据,代码如下。
/* data参数为表单数据组成的对象,dataToSend为待发送给后端的数据 */var dataToSend = document.implementation.createDocument("", "formdata", null);var tempData = dataToSend.documentElement;for (var key in data) { if (data.hasOwnProperty(key)) { var keyElement = doc.createElement(key);
keyElement.appendChild(doc.createTextNode(data[key]));
tempData.appendChild(keyElement);
}
}/*
xml文档格式示意:
<formdata>
<key1> value1 </key1>
<key2> value2 </key2>
</formdata>
*/
之后,与multipart/form-data
一样,直接发送数据,不需设置Content-Type
。
req.send(dataToSend);
小结
multipart/form-data
与text/xml
不需要设置请求头的Content-Type
;关于
method
,以上都是POST
方式,若是GET
方式是没有请求数据体的,数据直接加在URL后面
评论