ajax请求后的HTML Anchor标记重定向链接答案

【问题标题】：HTML Anchor tag redirect link after ajax requestajax请求后的HTML Anchor标记重定向链接
【发布时间】：2012-09-12 02:43:40
【问题描述】：

我正在尝试编写一种方法来捕获用户对站点菜单的点击，但我希望该过程对用户保持沉默，主要是当用户将鼠标悬停在锚标记上时，它会正常运行（显示它包含的链接）。我已经尝试了各种方法来做到这一点，现在我几乎可以使用它了，我的代码如下：

<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，但无法恢复已取消的事件。

部分问题来自额外的功能，例如，大多数用户右键单击锚标记以在新选项卡中打开（或使用控制+单击或中键单击），并使用类似的东西

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

网站上不允许（出于安全原因）。

任何建议如何做到这一点？

【问题讨论】：

标签： jquery html ajax anchor preventdefault

【解决方案1】：

试试这个

<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"
      }
    });
});

【讨论】：

我尝试了类似的方法，并且适用于左键单击的情况，但控制 + 左键单击或中键单击会在同一窗口中打开链接。某些链接还包含 target="_blank"，因此此方法也不适用于它们。
@desto - 已编辑，这肯定会起作用，唯一的问题是您不会在鼠标悬停时看到链接

【解决方案2】：

使用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;
      }
    });
});

【讨论】：

我尝试了类似的方法，并在左键单击的情况下工作，但控制 + 左键单击或中键单击在同一窗口中打开链接。某些链接还包含 target="_blank"，因此此方法也不适用于它们。
如果您想保留该功能，您无能为力。如果您不阻止事件发生，您的 ajax 请求将无法完成。如果您阻止该事件，则无法保留其他功能。
您是否考虑过制作一个在跟踪退出后重定向的中间页面？
您可以将点击时的 href 更改为重定向页面，然后您的重定向页面记录该操作并重定向用户。
似乎类似于使用 href="javascript:method()" 方法，我尝试过，但由于鼠标悬停文本不是最终链接，因此会要求将其删除。除非有办法显示另一个文本

【解决方案3】：

最新的 chrome 浏览器无法完成 ajax 请求。由于浏览器页面从用户那里得到了新的 url 请求，所以浏览器会立即终止线程。

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

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

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

【讨论】：