Question

我想在超链接标记＆＃34; a＆＃34;上添加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");
    });
}

我发现，如果我的＆＃34; a＆＃34;带有href-link的标签，如

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

我的服务器WON＆＃34;获取任何信息，并且触发了ajax的失败回调函数，但如果我删除了href-link或将其替换为#，如

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

我的服务器将获取我发送的信息，当然我的成功回调功能已被触发

失败回调功能没有返回任何错误消息，只是一个简单的单词错误
有没有人知道发生了什么以及如何更改页面并在同一次点击中发送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>

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

1 个答案: