HTML锚点标签在Ajax请求后重定向链接

Question

HTML锚点标签在Ajax请求后重定向链接

5

我正在尝试编写一个方法来捕获用户在网站菜单上的点击，但我希望这个过程对用户来说是静默的，主要是当用户悬停在锚点标记上时，它会正常地表现出来（显示它包含的链接）。我已经尝试了各种方式来做到这一点，现在我几乎已经成功了，我的代码如下：

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="http://www.google.com" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

在 jQuery 中，我有：

$(".selectAnchor, .menuAnchor").click(function(event){
    event.stopPropagation();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        return true;
      }
    });
});

链接可以重定向到选定的页面，但是ajax代码永远不会完成，因此无法注册用户的点击。

我尝试使用event.preventDefault，但是没有办法恢复取消的事件。

部分问题来自额外的功能，例如，大多数用户右键单击锚标记以在新标签页中打开（或使用ctrl +单击或中间单击），使用类似于

<a href="javascript:saveClick(o)">Google</a>

由于安全原因，不允许在该网站上进行此操作。

有什么建议可以解决这个问题吗？

- desto

3个回答

2

最新版本的Chrome浏览器无法完成ajax请求。由于浏览器页面从用户处获得了新的URL请求，因此浏览器会立即终止线程。

在网络选项卡中，有98%的情况下你可以看到ajax请求被取消了。

所以解决方法是使用sendBeacon API。这将异步执行POST请求。谷歌分析使用此代码来执行事件跟踪（例如点击）。 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

 navigator.sendBeacon("{{url}}", param);

- balaphp

0

试试这个

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="#" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

然后在 jQuery 中是这样的：

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        window.location = "http://www.google.com"
      }
    });
});

- Scott Selby

我尝试过类似的事情，对于左键单击的情况可以工作，但是控制键+左键单击或中键单击会在同一窗口中打开链接。一些链接还包含target="_blank"，因此这种方法也无法在它们上面工作。 - desto

@desto - 已编辑，这一定会起作用，唯一的问题是你将看不到鼠标悬停时的链接。 - Scott Selby

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin B · Accepted Answer

使用 event.preventDefault，然后在成功后使用 location.href = self.href

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    var self = this;

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = self.href;
      }
    });
});

或者利用上下文属性来去除 var self = this

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);

    $.ajax({
      type: 'POST',
      context: this,
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = this.href;
      }
    });
});