不知道多少人碰见过这个情况,当你使用jQuery 的ajax 方法调取JSON 或JSONP 对象时,在本地调试一切正常(包括IE6),但上传到服务器时IE6 就无法执行了。
假设代码是这样的:
1 2 | <div id="c"></div> <a href='javascript:' id="btn">test</a> |
1 2 3 4 5 6 7 8 | $("#btn").on("click",function(){ $.ajax({ url:"1.json", dataType:"JSON" //JSON 或 JSONP }).done(function(data){ $("#c").html(data.content); }) }) |
本地调试时包括IE6 在内各大主流浏览器都执行正常,上传到服务器再访问时,ie6 失败了。
以前一直使用的 <a href=”javascript:void(0)”>,自从看了《疑问:为什么要使用href=”javascript:void(0);”?》这篇文章后我也开始使用 <a href=”javascript:”>,所以我尝试修改回去,结果还是不行。
然后我想看看错误信息,改了下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $("#btn").on("click",function(){ $.ajax({ url:"1.json", dataType:"JSON" //JSON 或 JSONP }).done(function(data){ $("#c").html(data.content); }).fail(function(a,b,c){ alert(a.readyState); //输出:4 alert(a.responseText); //输出:undefined alert(a.status); //输出:200 alert(a.statusText); //输出:success alert(b); //输出:parseeror alert(c); //输出:[object error] }) }) |
看情况是数据获取正常,但转换为JSON 对象时出错,所以我去查看服务器返回数据是否格式错误,假如你也认为是这样的话,很抱歉,没有错误。
这是IE6 特有的BUG,当使用A标签时才会发生,还有一种状况是当你试图点击一个A标签以修改图片的src 属性时,IE6 下也会停止执行。
原理及解决办法:《ie6下使用JS替换IMG标签里的SRC属性图片不显示的原因,ie6存在的bug》
有几个吃饱了没事儿干的老外反复试验发现这个问题是ie6中一个底层机制的bug,之后的版本已经解决了。据说:<a href=”javascript:void(0)”> 或者 <a href=#”> 这样使用a标签的话并不能阻止a标签最后触发一个什么行为,导致ie6会错误的认为页面刷新或者重定向了,并且中断了当前所有连接,
返回刚才的话题,ajax也是一种数据传输,这么理解的话只要使用A标签触发传输数据的事件,在IE6 下都会失败,知道问题就好解决了,办法有3种:
1.最简单的,换个标签吧,别用A了。
2.使用 <a href=”javascript:aa();”> 这种写法调用javascript方法。
3.在绑定事件里阻止A标签触发默认事件,jQuery就提供了个很简单的调用 event.preventDefault()。
修改下js:
1 2 3 4 5 6 7 8 9 | $("#btn").on("click",function(e){ e.preventDefault(); $.ajax({ url:"1.json", dataType:"JSON" //JSON 或 JSONP }).done(function(data){ $("#c").html(data.content); }) }) |
测试正常,传到服务器上再测试,IE6正常,搞定 。
感谢分享.
谢谢