点击Anchor标签跳转前执行jQuery函数失效问题求助

当前代码的问题在于：window.location.href是同步执行的，而$.post属于异步HTTP请求，页面会在请求完成前就执行跳转，导致POST请求被中断无法完成。要解决这个问题，需要把跳转逻辑放到POST请求的回调函数中，确保请求完成后再执行跳转。

修改后的JavaScript代码 #

function insert(mobno) {
  $.post("verification_back.php", {'mobno': mobno}, function(data) {
    if (data == 1) {
      alert('Inserted');
    } else {
      alert('Oops !!!');
    }
    // 请求完成后执行页面跳转
    window.location.href = 'https://api.whatsapp.com/';
  });
}

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
    <title>Status</title>
</head>
<body>
<!-- 移除onclick中的直接跳转，添加return false阻止a标签默认行为 -->
<a onclick="insert(9999999999); return false;" href="#">9999999999</a><br/>
</body>
</html>

额外优化（处理请求失败场景） #

如果需要更严谨地处理请求失败的情况，可以添加fail回调，确保无论请求成功或失败都执行跳转：

function insert(mobno) {
  $.post("verification_back.php", {'mobno': mobno}, function(data) {
    if (data == 1) {
      alert('Inserted');
    } else {
      alert('Oops !!!');
    }
  })
  .done(function() {
    window.location.href = 'https://api.whatsapp.com/';
  })
  .fail(function() {
    alert('请求失败');
    window.location.href = 'https://api.whatsapp.com/';
  });
}

内容的提问来源于stack exchange，提问作者www.friend0.in