jQuery Ajax发起PUT请求更新成功后无法触发回调及重定向问题求解

问题根因 #

1. 后端PUT接口处理完成后返回了302重定向响应，而前端AJAX请求明确配置了dataType: 'json'，要求响应必须为JSON格式。AJAX会自动跟随重定向请求到/projects页面，拿到的响应是HTML文本，无法被解析为JSON，因此jQuery直接触发error回调，不会进入success回调。
2. 你没有为AJAX请求添加error回调，因此出错后无任何提示，看起来像请求挂起。
3. Mongoose控制器的updateById方法没有返回更新结果，后端路由无法拿到执行结果做异常判断。

修复步骤 #

1. 修改Mongoose控制器，返回更新结果

修改updateById方法，最后添加返回语句：

async updateById(request) {
  const { name, description } = request.body;
  const query = { _id: request.params.id };
  const options = { new: true };
  const update = { name: name, description: description, lastUpdated: Date.now() };
  let result = await this.Project.findByIdAndUpdate(query, { $set: update }, options);
  console.log(result);
  // 新增：返回更新结果
  return result;
}

2. 修改Express路由，返回JSON响应而非重定向

重定向操作交给前端执行，后端只返回接口执行结果：

// UPDATE
router.put('/:id', async (request, response) => {
  try {
    const updateResult = await controller.updateById(request);
    return response.json({
      code: 0,
      msg: '更新成功',
      data: updateResult
    });
  } catch (err) {
    return response.status(500).json({
      code: 1,
      msg: '更新失败',
      error: err.message
    });
  }
});

3. 修改前端AJAX配置，添加跳转逻辑和错误回调

同时阻止按钮点击的默认行为，避免意外提交：

$('#update').click(function (e) {
  // 阻止默认行为
  e.preventDefault();
  var settings = {
    // 推荐用相对路径，避免跨域问题
    url: `/projects/<%= project.id %>`,
    method: 'PUT',
    dataType: 'json',
    data: { name: $('#name').val(), description: $('#description').val() },
    success: function (result) {
      console.log(result);
      // 成功后执行页面跳转
      window.location.href = '/projects';
    },
    // 新增错误回调，方便排查问题
    error: function (xhr, status, error) {
      console.error('更新出错：', status, error);
      alert('更新失败，请稍后重试');
    }
  };
  $.ajax(settings);
});

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