解决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 ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP无敌近乎加密方式!
2010/07/17 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
办公用品质量保证书
2015/05/11 职场文书
团委副书记工作总结
2015/08/14 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python