刚开始,Post请求如以下例子,在除IE9以下的主流浏览器是正常,没有报错等啥的。然后一到IE8、9就没有反应了。
直接不响应,我刚开始第一反应就是禁用了脚本。后来才知道IE8、9的兼容性问题。
var _Url = 'http://baidu.com/login';
var _Data = {user:'xiaomi',password:'123456'};
$.post( _Url , _Data ,
function(res) {
console.log(res)
}
);
查询了一下资料,jQuery与插件 jQuery-ajaxTransport-XDomainRequest 相互配合就可以解决兼容性问题了。注意:使用了这个插件就不能够添加自定义的header信息了,只支持 contentType: 'text/plain',异步。根据其文档编写成如下:
var _Url = 'http://baidu.com/login';
var _Data = {user:'xiaomi',password:'123456'};
// GET
$.getJSON(_Url).done(function(res) {
console.log(res)
});
// POST
$.ajax({
url: _Url,
data: _Data ,
contentType: 'text/plain',
type: 'POST',
dataType: 'json'
}).done(function(res) {
console.log(res)
})
我以为酱紫处理就好了,因为界面有反应了。报了后台返回的msg:账号或者密码错误。然而后来我输入了正确的账号及对应的密码,还是这个错误就感觉不对了,GET请求没有问题,但是POST请求还有点小BUG。后来实在找不出原因,就叫后台看了一下我的请求,发现没有后台没有接收到携带过去的参数。但是看了调试页面确实发送过去了。
根据后台描述:说是要搜索整个发送过去的文档才能解析到携带的参数,不采用这个解决方案。于是前端退一步,当遇到IE8、IE9浏览器时,携带参数放置地址携带给后台。_Url + '?user=test10&password=123456'。
var _Url = 'http://baidu.com/login';
var _Data = {user:'xiaomi',password:'123456'};
if (window.XDomainRequest) _Url = _Url + '?' + toQueryString(_Data);
$.ajax({
url: _Url,
data: _Data,
type: _Method,
dataType: 'json'
}).done(function (oResult) {
console.log(oResult)
})
//对象转换为URL查询参数
function toQueryPair(key, value) {
if (typeof value === 'undefined') return key;
return key + '=' + encodeURIComponent(value === null ? '' : String(value));
}
//对象转换为URL查询参数
function toQueryString(obj) {
var ret = [];
for (var key in obj) {
key = encodeURIComponent(key);
var values = obj[key];
if (values && values.constructor == Array) { //数组
var queryValues = [];
for (var i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(toQueryPair(key, values));
}
}
return ret.join('&');
}
酱紫可以解决问题了。
欢迎观看不定期更新的技术贴。O(∩_∩)O哈哈~
如有文章存在BUG,欢迎更正哦!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。