大家好,我是烤鸭:
又来踩坑了。
1. 场景复现
有反馈我们的H5页面,无法正确显示页面。就类似下图这样,ajax没法请求到数据。
之前测试的时候是在web端做的测试,用安卓7.0和8.0的手机都试了一下,是没有问题的。
后来借到一台小米3(4年前的机型?)搭载的是安卓5.0吧,确实出现这个问题了。(后台收不到请求,估计是js报错)
由于不能看到哪里报错,只能一点点删代码,看是哪个地方不兼容。
2. 猜测问题
2.1 使用sessionStorage,可能是低版本安卓不支持sessionStorage
sessionStorage.removeItem["test_xxx"];
2.2 使用h5的函数(location.toString())不支持,目的是获取浏览器地址栏
var s = location.toString();
2.3 ajax方法有问题,代码如下:
//获取该手机最新订单
function getLatestOrder(){
$.ajax( {
url : prefix+'/getLatestOrder',// 跳转到 action
data:{
'mobile' : mobile
},
type:'post',
cache:false,
dataType:'json',
//跨域
dataType:'jsonp',
jsonp : 'callback',
success : function(data) {
console.log(data);
if (data.code == "100") {
window.location.reload();
} else {
//错误提示
console.log(data.msg);
}
},
error : function() {
alert("异常!");
}
});
}
后来一点点排查,2.2导致请求无法发出,改掉location函数之后,发现后台可以收到请求(返回值正常),但是页面没有收到返回值,是2.3的问题。
3 解决方式
将jquery的ajax改为原生的ajax,比如上面的方法改为
//获取该手机最新订单
function getLatestOrder() {
var sendData = {mobile:mobile};
xhrAjax('post',prefix + "/getLatestOrder", sendData, function(data){
var data1 =JSON.parse(data);
if (data1.code == "7016") {
window.location.reload();
} else {
//错误提示
console.log(data1.msg);
}
}, function(error){
console.log(error);
showError("异常!");
});
}
xhrAjax.js
function xhrAjax(type, url, data, success, failed){
// 创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
var type = type.toUpperCase();
// 用于清除缓存
var random = Math.random();
if(typeof data == 'object'){
var str = '';
for(var key in data){
str += key+'='+data[key]+'&';
}
data = str.replace(/&$/, '');
}
if(type == 'GET'){
if(data){
xhr.open('GET', url + '?' + data, true);
} else {
xhr.open('GET', url + '?t=' + random, true);
}
xhr.send();
} else if(type == 'POST'){
xhr.open('POST', url, true);
// 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
// 处理返回数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else {
if(failed){
failed(xhr.status);
}
}
}
}
}
4. 总结
因为这个app其他页面也用过jq的ajax,很难想象是jquery的问题。
由于改的急,没有尝试更多的方案。
后来看了一个帖子,让安卓按照上面的重新给我打个包。
https://blog.csdn.net/u013540324/article/details/64573785
还是不行,也是后台可以收到请求(返回值正常),但是页面没有收到返回值。
虽然知道怎么处理了,但是还是无法解释为什么,mark一下,给有相同问题的朋友提个醒。