Ajax方式提交表单的常见编码类型总结
|
之前一篇文章（表单提交时编码类型enctype详解）介绍了表单属性 用Ajax方式提交表单，决定编码类型的是请求头中
下面将介绍XMLHttpRequest、jQuery和AngularJS三种异步提交方式，及对应的每一种Conten-Type类型。 XMLHttpRequest 方式XMLHttpRequest对象用于向后端收发数据请求，现代浏览器都支持（IE要用ActiveXObject实现相同功能，本文就不讨论了）。 后续代码将假设已经获得了XMLHttpRequest对象，其名为 application/x-www-form-urlencoded这种 首先，需要用 /* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var tempArr = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
tempArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
}
var dataToSend = tempArr.join('&');
接着，设置请求头部的 req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.send(dataTosend);
multipart/form-data这种 首先，用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
接着，直接发送给后端，注意这种类型的发送方式，不能设置请求头部的 req.send(dataToSend); text/plain如果请求头部没有设定 这种方式的代码很简单，直接发送字符串即可，代码如下。 req.send('...(此处是字符串格式的数据)');
application/jsonJSON格式的数据，后端和各种移动端都很方便处理，用这种MIME类型时，需要将数据对象转换成JSON串。 首先，转换数据成JSON串；然后，设定请求头部的 /* 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>
*/
之后，与 req.send(dataToSend); 小结
附：接收请求时的解析方式
jQuery 方式application/x-www-form-urlencodedjQuery中默认的表单提交方式，与XMLHttpRequest不同的地方在于：数据的URL方式编码，由jQuery来做，只需要在 代码如下。 /* dataToSend为Object类型的表单数据，否则jQuery会抛出异常 */
$.ajax({
method: 'POST',url: '...',data: dataToSend,contentType: 'application/x-www-form-urlencoded',// 可省略
processData: true,// 可省略
success: function() {...}
});
注意：若采用 multipart/form-data这种MIME类型的提交方式，适合用于上传文件。 首先，对表单数据构建成FormData的HTML5对象，代码如下。 /* dataToSend 是FormData对象，可直接作为数据传输到后端 */
var dataToSend= new FormData(); // HTML5对象,data[key]);
}
}
之后，用 $.ajax({
method: 'POST',// dataToSend 是FormData对象
contentType: false,// contentType 必须设置为false
processData: false,// processData 必须设置为false
success: function() { ... }
});
text/plain用该类型提交，则直接传输字符串。 $.ajax({
method: 'POST',contentType: 'text/plain',processData: false,// processData 设置为false则不会转换成URL编码
success: function() { ... }
});
application/json用该类型提交，则传输JSON字符串，所以要用函数 /* data 为表单Object类型的数据 */
dataToSend = JSON.stringify(data);
$.ajax({
method: 'POST',contentType: 'application/json',// processData 设置为false则不会转换成URL编码
success: function() { ... }
});
注意：若后端也返回JSON字符串时， $.ajax({
...
success: function(data) {
var jsonData = JSON.parse(data);
...
}
});
text/xml首先，构建XML文档对象，存入表单数据，代码如下。 /* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var dataToSend = document.implementation.createDocument("",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>
*/
之后，发送数据 $.ajax({
method: 'POST',contentType: false,// contentType 可设为false也可写成具体的'text/xml'等
processData: false,// processData 必须设为false
success: function() { ... }
});
AngularJS 方式application/x-www-form-urlencoded用这种MIME类型提交表单数据，则需要对表单数据进行URL编码，用 $http({
method: 'POST',data: $.param(dataToSend),headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
).success(...);
multipart/form-data首先，该类型如果要上传文件，那么Angular为了获取文件，推荐写成指令。代码如下。 .directive("fileReader",[function () {
return {
restrict: 'AE',scope: {
fileReader: "=" // HTML中的file-reader作为存放文件对象的变量
},link: function (scope,element) {
element.bind("change",function (changeEvent) {
scope.$apply(function () {
scope.fileReader = changeEvent.target.files[0];
});
});
}
}
}])
/* HTML结构如下 */
<input type="file" name="key1" file-reader="formData.file[1]">
然后，需要用 $http({
method: 'POST',headers: {
'Content-Type': undefined // 必须设置为undefined
},transformRequest: function(data) {
var tempFormData = new FormData(); // HTML5对象,IE11以下不支持
for (var key in data) {
if (data.hasOwnProperty(key)) {
tempFormData.append(key,data[key]);
}
}
return tempFormData;
}
}).success(...)
text/plain以字符串的方式提交表单数据，代码如下。 $http({
method: 'POST',headers: {
'Content-Type': 'text/plain'
}).success(...)
application/json以JSON字符串的方式提交表单数据，用 $http({
method: 'POST',data: JSON.stringify(dataToSend),headers: {
'Content-Type': 'application/json'
}).success(...)
注意：但是在 text/xml与 $http({
method: 'POST',headers: {
'Content-Type': undefined // 设置为undefined或'text/xml'等
},transformRequest: function(data) {
var doc = document.implementation.createDocument("",null);
var tempData = doc.documentElement;
for (var key in data) {
if (data.hasOwnProperty(key)) {
var keyElement = doc.createElement(key);
keyElement.appendChild(doc.createTextNode(data[key]));
tempData.appendChild(keyElement);
}
}
return doc;
}
}).success(...)
附：GET方式提交表单数据Angular用GET方式提交表单数据，应该用 $http({
method: 'GET',params: dataToSend
}).success(...) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |