Question

我有这个：

<div id="div-for-ajax-onclick">
<a href="http://www.google.com">Link to google</a> 
</div> 

$("#div-for-ajax-onclick").click(function() {
// update database
});

如果有人点击指向Google的链接，我希望如此： - ＆GT;使用AJAX动态更新数据库，
- ＆GT;并且还保持正常的链接行为并将其发送给Google。

这可能吗？

谢谢

Answer 1

使用jQuery的常规POST请求，其中用户被重定向到AJAX调用的success函数。当AJAX请求从服务器收到OK时，即调用success，即更新数据库。现在可以使用www.google.com将用户重定向到window.location.href。

必须使用API完成数据库更新的处理。

function handleLinkClick(redirectURL) {
  $.ajax({
    type: "POST",
    url: "URL to your endpoint in the server",
    data: {}, // the data you want to send is placed here.
    success: () => {
      window.location.href = redirectURL;
    },
  });

};

<div>
  <a onclick="handleLinkClick('www.google.com')" />
</div>

Answer 2

我首先将POST发送到数据库，然后成功，打开谷歌的URL，这样

$.ajax({
  url: `${url}`,
  type: 'POST',
  data: data,
  success: function () {
    // Now that the user's request has updated the database, that means that
    // this has been a success, now the next thing is to open the URL.
    window.open(url);
  }
})

Answer 3

是的，你可以。在这种情况下，您需要做的是阻止a的默认行为。并执行db事物，然后重定向或类似

var link = document.querySelector("a");

link.addEventListener("click", function(e){
    e.preventDefault();
    console.log("save things in DB");
    
    window.location = e.target.href;
})

<div id="div-for-ajax-onclick">
<a href="http://www.google.com">Link to google</a> 
</div>

如果您有多个a代码，则必须使用querySelectorAll("a")，然后循环遍历所有以附加事件侦听器

在div现有链接上添加Ajax调用

3 个答案: