今天作死,在写一个页面时,通过$.getJSON 往后台拿数据时,发现PC端正常,但到了手机端则失效,检查代码均未发现错误,逐使用AJAX测试,结果依旧是不行,到了后面在同事的提醒下,醒悟!!
关键代码如下:
var index = layer.msg('加载中', {icon: 16});
$.getJSON("http://127.0.0.1:8080/thirdserver/share/getDoorctrlInfo?uuid="+uuid+"&sign="+sign+"&jsonpCallback=?",function(data){
if(data.status==1){
$("#communityName").html(data.data.communityName);
$("#hostName").html(data.data.hostName);
$("#name").html(data.data.name);
$("#count").html(data.data.count);
$("#beginTime").html(data.data.beginTime);
$("#endTime").html(data.data.endTime);
}else{
layer.msg('未查询到门禁授权信息');
}
layer.close(index);
});
更改后,代码更改后为:
var index = layer.msg('加载中', {icon: 16});
$.getJSON("http://192.168.40.39:8080/thirdserver/share/getDoorctrlInfo?uuid="+uuid+"&sign="+sign+"&jsonpCallback=?",function(data){
if(data.status==1){
$("#communityName").html(data.data.communityName);
$("#hostName").html(data.data.hostName);
$("#name").html(data.data.name);
$("#count").html(data.data.count);
$("#beginTime").html(data.data.beginTime);
$("#endTime").html(data.data.endTime);
}else{
layer.msg('未查询到门禁授权信息');
}
layer.close(index);
});
吖的,发现没,IP访问地址的问题,由于在PC端时通过
127.0.0.1可以找到api接口,但移动端可不认账,“吖的,我是手机,我本地哪来的接口。。。。”
我心好累,
ajax需要同步时:
如果使用ajax时,需要同步,非异步情况下,使用 $.ajaxSettings.async = false;
栗子先看一段代码:
for(var j=0;j<24;j++){ (jQuery).getJSON('log_analyze.php',{r:Math.random(),logid:logid,op:2,j:j},function(data){ if(data.success_agent){ var width=j*10; $("#up_time_loading").empty().append("<div style=\"width:"+width+"px;height:10px;border:1px solid #333;background-color:#333\"></div>"); } }) }
这段代码的意思是:请求log_analyze.php,每次请求成功后就把J加1,然后再去请求。
打开firebug,可以看到这24条数据是异步执行,所以我log_analyze.php获取到得数据很混乱,没有规律,怎么解决呢?
在执行之前加$.ajaxSettings.async = false; (同步执行)
$.ajaxSettings.async = false;
for(var j=0;j<24;j++){ (jQuery).getJSON('log_analyze.php',{r:Math.random(),logid:logid,op:2,j:j},function(data){ if(data.success_agent){ var width=j*10; $("#up_time_loading").empty().append("<div style=\"width:"+width+"px;height:10px;border:1px solid #333;background-color:#333\"></div>"); } }) }
在for循环之前加一个$.ajaxSettings.async = false; 表示同步执行,这样他就会安装顺序执行了。
下面的是从网上摘过来的:
同时执行多个$.getJSON() 数据混乱的问题的解决
在执行之前加$.ajaxSettings.async = false; (同步执行)
执行你的代码之后及时恢复为$.ajaxSettings.async = true; (异步执行)
不然影响别的地方的需要异步执行的代码。
example:
$.ajaxSettings.async = false;
$.getJSON(url, data, function(data){ });
$.getJSON(url, data, function(data){ });
$.getJSON(url, data, function(data){ });
......
$.ajaxSettings.async = true;
同步异步资料来源于:http://www.cnblogs.com/wangkongming/archive/2012/11/19/2777725.html
总结1.使用时,如果手机端ajax出现问题,千万别怀疑它是否支持ajax,百分之九十代码问题引起。
ajax浏览器支持:http://www.w3school.com.cn/ajax/ajax_browsers.asp
2.通过JSONP跨域访问api时,$.ajax需要在界面设定"dataType:jsonp,jsonp:callback"这两个关键函数,service中通过request.getParameter("callback"); 获取设定jsonp中的value值,并且返回时按照要求进行拼凑返回。使用$.getJson,在URL中追加callback这个参数,如 上面的栗子。
具体:http://www.cnblogs.com/Denny_Yang/p/4425045.html
3.使用JSONP进行跨域时,如若使用第三方api,需要提前确认接口中是否有按要求,接收callback且返回相应的格式,否则无法使用,如:weixin.
ajax官方教程:http://www.w3school.com.cn/ajax/index.asp、JSONP实现的两种方式:http://www.cnblogs.com/Denny_Yang/p/4425045.html