Anchor Click和jQuery GET在FF和Safari中不起作用但在Chrome中工作,为什么?

时间:2014-10-27 15:53:35

标签: jquery ajax google-chrome firefox safari

问题
非常简单:除了锚标记<a>的常规点击功能外,我想在点击锚点时触发ajax GET请求(在我的示例中由class值{{ {1}})。

重要:主播(href)的目的地以及fire来电的目的地在目标网址中具有相同的域。

示例jQuery代码:

Ajax

示例HTML代码:

$(document).ready(function() {
  $('.fire').click(function() {
    $.get( "http://example.com/rest/fire/");
  });
});

在Chrome(v38)中,发送异步“即发即弃” - <a href="http://example.com/index.html" class="fire">Click here</a> 请求,然后浏览器显示链接的页面。在Firefox(v32)和Safari(Yosemite)中,异步GET请求不会被触发。为什么呢?

我甚至在JSFiddle中测试过它(我只看到了锚GET请求,而不是GET的Ajax GET请求)

解决方案(2014年10月28日更新)
它在Safari和Firefox中不起作用,因为/rest/fire默认使用异步模式(正如我最初想要的那样)。但是,如果目标域与$.get()标记的URL相同,则Firefox和Safari似乎忽略了anchor。所以为了使它工作,你必须使ajax调用同步

更新jQuery代码(现在也适用于Firefox和Chrome):

$.get()

2 个答案:

答案 0 :(得分:2)

解决方案(2014年10月28日更新)
它在Safari和Firefox中不起作用,因为$.get()默认使用异步模式(正如我最初想要的那样)。但是,如果目标域与anchor标记的URL相同,则Firefox和Safari似乎忽略了$.get()。所以为了使它工作,你必须使ajax调用同步

更新jQuery代码(现在也适用于Firefox和Chrome):

$(document).ready(function() {
  $('.fire').click(function() {
    $.ajax({    
      url: "http://example.com/rest/fire/" ,
      async: false // needed for Safari and Firefox
    });
  });
});

但是我仍然确信这是Firefox和Safari中的一个错误,它也应该与异步模式一起使用。问题的根本原因很可能是基于浏览器中的实现如何建立与单个域的连接(通过一个连接多路复用,多个非多路复用连接?)......也许有人知道?

答案 1 :(得分:-1)

您需要阻止链接的默认操作。 http://jsfiddle.net/d2o11rn9/

$(document).ready(function() {
    $('.fire').click(function(e) {
        $.get("/test");
        e.preventDefault();
    });
});