解决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 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 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防止SQL注入详解及防范
2013/11/12 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
杨氏矩阵查找的JS代码
2013/03/21 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python-基础-入门 简介
2014/08/09 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
银行出纳岗位职责
2013/11/25 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
《散步》教学反思
2014/03/02 职场文书
学习经验交流会主持词
2014/04/01 职场文书
商务经理岗位职责
2014/08/03 职场文书
临时用工协议书范本
2014/10/29 职场文书
干部个人考察材料
2014/12/24 职场文书
2015年大学生实习评语
2015/03/25 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Redis RDB技术底层原理详解
2021/09/04 Redis