HTML Anchor tag redirect link after ajax request

问题

I'm trying to write a method to catch user clicks on a site menu, but I want the process to be silent for the user, mainly, that when a user hovers over an anchor tag, it would behave normally (showing the link it contains). I've tried in various ways to do this, and I almost have it working now, my code is as follows:

<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>

And in jQuery, I have:

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

The link redirects to the selected page, but the ajax code never finishes, thus never registers the user's click.

I tried using event.preventDefault, but there is no way to resume the cancelled event.

Part of the problem comes from extra functionality, say, most users right click on the anchor tag to open in a new tab (or use control + click, or middle click), and using something like

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

is not allowed on the site (for security reasons).

Any suggestions how this can be done?

回答1:

Use event.preventDefault, then on success, use 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;
      }
    });
});

Or make use of the context property to remove 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;
      }
    });
});

回答2:

Latest chrome browser wont complete the ajax request. Since the browser page got new url request from the user, so browser will kill the thread immediately.

98% of times you can see that the ajax request got cancelled in a network tab.

So the solution is use sendBeacon API. This will perform a POST request asynchronously. Google analytics uses this code to perform the event trackings (Ex: click).
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

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

回答3:

Try This

<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>

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

来源：https://stackoverflow.com/questions/12500669/html-anchor-tag-redirect-link-after-ajax-request

标签

jquery

html

ajax

anchor

preventdefault