解决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 相关文章推荐
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
利用vue实现模态框组件
Dec 19 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
discuz7 phpMysql操作类
2009/06/21 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python多线程扫描端口代码示例
2018/02/09 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
中考学习决心书
2015/02/04 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Python Pandas常用函数方法总结
2021/06/15 Python