为含链接的div添加Ajax调用：点击时同时执行更新与页面跳转

当然可行啦！不过这里有个容易踩的坑：AJAX默认是异步执行的，如果直接让链接正常跳转，很可能数据库更新的请求还没走完，页面就已经跳去目标地址了，导致更新失败。下面给你两种实用的实现方式，按需选择：

先贴一下你的原始代码方便对照：

现有HTML：

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

现有JS：

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

方法一：异步AJAX完成后手动跳转（推荐） #

这种方式能确保数据库更新请求成功完成后再跳转，完全避免请求丢失的问题。核心思路是先阻止链接的默认跳转行为，等AJAX请求的回调触发后，再手动跳转到目标地址。

// 直接给<a>标签绑定事件，比绑定父div更精准
$("#div-for-ajax-onclick a").click(function(e) {
  // 阻止链接的默认跳转动作
  e.preventDefault();
  // 先把目标链接存起来
  const targetUrl = this.href;

  // 发送AJAX请求更新数据库
  $.ajax({
    url: "你的数据库更新接口地址", // 替换成实际接口
    method: "POST", // 或GET，根据接口要求来
    data: {
      // 这里放需要提交给后端的数据，比如id: 123
    },
    success: function(response) {
      // 请求成功后，再跳转到目标地址
      window.location.href = targetUrl;
    },
    error: function() {
      // 可选：请求失败时的处理，比如提示用户后再跳转
      alert("数据库更新失败啦，不过还是会跳转到目标页面哦");
      window.location.href = targetUrl;
    }
  });
});

方法二：使用同步AJAX（不推荐） #

同步AJAX会让浏览器暂停所有操作，直到请求完成后才继续执行代码，这样也能保证更新完成后再跳转。但缺点是会导致页面短暂卡顿，影响用户体验，所以除非特殊情况，一般不建议用这种方式。

$("#div-for-ajax-onclick a").click(function(e) {
  e.preventDefault();
  const targetUrl = this.href;

  $.ajax({
    url: "你的数据库更新接口地址",
    method: "POST",
    data: { /* 提交的数据 */ },
    async: false, // 关键：设置为同步请求
    complete: function() {
      // 请求完成（无论成功失败）后跳转
      window.location.href = targetUrl;
    }
  });
});

小提醒 #

• 原来的代码是给<div>绑定点击事件，这会触发事件冒泡：点击链接时，div的点击事件会触发，但链接的默认跳转也会同时执行，很容易导致AJAX还没跑完就跳转了。所以直接给<a>标签绑定事件是更稳妥的做法。
• 如果你的前端页面和后端接口不在同一个域名下，要确保后端配置了跨域允许，否则AJAX请求会失败哦。

内容的提问来源于stack exchange，提问作者Lisa Lucas