大家好,我是烤鸭:
又来踩坑了。
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一下,给有相同问题的朋友提个醒。