点击事件中AJAX DELETE请求未完成即跳转至/projects的问题咨询

问题根因 #

• 未阻止<a>标签的默认跳转行为：删除按钮使用的<a>标签自带href="/projects"属性，点击后会立刻触发页面跳转，不等异步AJAX请求执行完成，页面卸载后未完成的删除请求会被中断
• 跳转逻辑未绑定到AJAX回调：当前代码仅在请求完成的回调中打印日志，没有写跳转逻辑，即使阻止了默认行为也无法实现请求完成后跳转的需求

修复方案 #

方案1：最小改动适配现有代码 #

修改JS逻辑，阻止默认跳转行为，在请求成功回调中加入跳转逻辑，同时补充错误处理：

$(document).ready(function() {
  $('#delete').click(function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 可选：增加二次确认，避免误删
    if (!confirm('确定要删除该项目吗？操作不可逆')) {
      return;
    }
    var settings = {
      url: `http://localhost:3000/projects/<%= project.id %>`,
      method: 'DELETE',
      timeout: 0,
    };

    $.ajax(settings)
    .done(function(response) {
      console.log(response);
      // 删除请求成功后再跳转
      window.location.href = '/projects';
    })
    .fail(function(err) {
      console.error('删除失败：', err);
      alert('删除操作失败，请稍后重试');
    });
  });
});

方案2：语义化优化实现（推荐） #

删除属于动作操作，不应该用负责导航的<a>标签实现，改为<button>标签更符合HTML规范，也不需要额外处理默认跳转逻辑：

1. 修改HTML中删除按钮代码：

<!-- 替换原a标签的删除按钮，去掉href属性 -->
<button id="delete" type="button" class="btn btn-danger"> DELETE </button>

2. JS逻辑和方案1一致，不需要加e.preventDefault()即可正常运行。

相关最佳实践 #

• 操作类按钮优先使用<button>标签：符合语义规范，也能避免<a>标签默认导航行为带来的意外问题
• 异步操作的后续逻辑必须放入回调中：AJAX是异步执行的，依赖请求结果的逻辑必须放到done/fail/always回调中，不能写在请求发起代码的同级位置
• 必须补充异常处理逻辑：避免请求失败时用户无感知，出现不符合预期的交互
• 高危不可逆操作必须增加二次确认：减少用户误操作带来的损失

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