解决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 相关文章推荐
js 中的switch表达式使用示例
Jun 03 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 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
中东人咖啡哲学
2021/03/03 咖啡文化
深入PHP数据加密详解
2013/06/18 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript 基本概念
2015/01/20 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
浅析vue-router原理
2018/10/19 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python实现发送email的几种常用方法
2014/08/18 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
青年文明号服务承诺
2014/03/31 职场文书
2014年车间工作总结
2014/11/21 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
保证书格式
2015/01/16 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python