解决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开发时的五个注意事项
Dec 08 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
WebPack工具运行原理及入门教程
Dec 02 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
php字符串操作常见问题小结
2016/10/11 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
Javascript验证方法大全
2015/09/21 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
在Django的通用视图中处理Context的方法
2015/07/21 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
简单了解django orm中介模型
2019/07/30 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python页面加载的等待方式总结
2021/02/28 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书