将 onclick 处理程序添加到超链接标签以触发 ajax？

Question

我想在超链接标签“a”上添加 ajax 调用，这个 ajax 只会向服务器发送一些信息，我不必得到任何回报。
我试过这样的事情：

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

我发现，如果我的“a”标签带有类似

的 href 链接

<a href="https://www.google.com" id="myId">click</a>

我的服务器不会“获取任何信息，并且我的 ajax 失败回调函数被触发，但是如果我删除 href-link 或将其替换为 # 之类的

<a href="#" id="myId"></a>
<a id="myId"></a>

我的服务器会收到我发送的信息，当然我的成功回调函数被触发了

fail回调函数没有返回任何错误信息，只是一个简单的字error
有谁知道发生了什么以及如何更改页面并在同一次点击中发送 ajax 调用？

顺便说一句，我不喜欢在我的成功回调函数中添加类似
window.location.href = "https://www.google.com.tw" 的东西，因为在这种情况下我要维护其他人的代码，我更喜欢将我的代码附加到下面而不是修改了已经存在的，谢谢！

Answer 1

首先，您应该通过添加 preventDefault() 来防止默认行为（重定向）：

e.preventDefault();

希望这会有所帮助。

document.querySelector("#myId").onclick = function(e) {
  e.preventDefault();
  
  $.ajax({
    url: 'api_url',
    type: 'post',
    data: {key: 'value'},
  })
  .done(function() {
    console.log("success");
  })
  .fail(function() {
    console.log("error");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://www.google.com" id="myId">click</a>