解决jQuery ajax请求在IE6中莫名中断的问题


Posted in Javascript onJune 20, 2016

场景还原:给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在非IE6中都一切正常。

<a href="javascript:;" id="btn">click me</a>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 var url = "http://api.flickr.com/services/"
 "feeds/photos_public.gne?tags=car&"
 "tagmode=any&format=json&jsoncallback=?";
 $( "#btn" ).click(function(){
  $.getJSON( url, function( data ){
   alert( data );
  });
 });
</script>

在IE6中使用Fiddler2监视请求,经常会出现”aborted”,折腾了许久,相当的诡异。后来将a标签换成button,请求正常,最后经提醒,可能是a标签的默认事件中断了请求。但是,在HTML代码中,已经将a标签的href设置成了”javascript:;”,通常这样是可以阻止默认事件了(页面跳转)。a标签的click事件会先执行,然后才执行href的跳转,如果href是一段javascript语句,这个时候就会执行。IE6在执行href的javascript语句时就中断了click触发的ajax请求。使用href=”javascript:;”是为了阻止默认事件,将阻止默认事件的动作移到click事件中就可以解决问题了,这样就不会执行href中的javascript语句了。

$( "#btn" ).click(function(e){
 $.getJSON( url, function( data ){
  alert( data );
 });
 e.preventDefault();
});

注:e.preventDefault(); 这一句的作用就是阻止js中的默认事件。

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
BootStrap selectpicker
Jun 20 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 #Javascript
JS控制层作圆周运动的方法
Jun 20 #Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 #Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 #Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 #Javascript
jQuery插件 Jqplot图表实例
Jun 18 #Javascript
jqPlot jQuery绘图插件的使用
Jun 18 #Javascript
You might like
PHP PDO函数库详解
2010/04/27 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JS求平均值的小例子
2013/11/29 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
python打开网页和暂停实例
2014/09/30 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python制作图片缩略图
2019/04/30 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
解决Django连接db遇到的问题
2019/08/29 Python
python批量处理文件或文件夹
2020/07/28 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
网站开发实习生的自我评价
2013/12/11 职场文书
高二英语教学反思
2014/01/19 职场文书
大学生校园创业计划书
2014/02/08 职场文书
小学生手册家长评语
2014/04/16 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
python 中的@运算符使用
2021/05/26 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL