Add onclick handler to hyperlink tag to trigger ajax?
<p>I want to add ajax call on hyperlink tag "<code>a</code>", this ajax will only send some info to server and I don' have to get any return.<br>
I tried something like this:  </p>

<pre><code>document.querySelector("#myId").onclick = function() {
    $.ajax({
        url: 'path',
        type: 'post',
        data: {key: 'value'},
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    });
}
</code></pre>

<p>And I found that, if my "<code>a</code>" tag with a href-link like  </p>

<pre><code>&lt;a href="https://www.google.com" id="myId"&gt;click&lt;/a&gt;
</code></pre>

<p>My server WON"T get any info, and my fail callback function of ajax was triggered, but if I remove the href-link or replace it with <code>#</code> like  </p>

<pre><code>&lt;a href="#" id="myId"&gt;&lt;/a&gt;
&lt;a id="myId"&gt;&lt;/a&gt;
</code></pre>

<p>my server WILL get the info I send, and of course my success callback funciton was triggered  </p>

<p>The fail callback function didn't return any error message, just a simple word <strong>error</strong><br>
Does anybody know what's going on and how to change the page and send ajax call in the same click?   </p>

<p>By the way, I'm not prefer to put something like<br>
<code>window.location.href = "https://www.google.com.tw"</code> in my success callback function, because in this case I'm maintain others' codes, I prefer to append my code down below rather than modified the already exist one, thanks!</p>