Ajax PUT请求成功后客户端无法执行console.log及页面刷新问题

看起来你的PUT请求已经成功写入数据库，但回调里的console.log和页面刷新没触发，大概率是这几个原因，咱们一步步排查：

1. 先确认Ajax请求是否真的进入成功回调 #

很多时候数据库更新成功，但后端返回的不是200类的成功状态码，导致then回调没触发。给你的Ajax加上错误处理，看看是不是请求藏着问题：

$(".devour").on("click", function(event) {
  event.preventDefault();
  var id = { id: $(this).attr("id") };
  $.ajax("/", {
    type: "PUT",
    data: id,
  }).then(function() {
    console.log("Updated Burger");
    location.reload();
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // 打印错误信息帮你定位问题
    console.error("请求失败原因:", textStatus);
    console.error("响应状态码:", jqXHR.status);
  });
});

打开浏览器控制台（F12），点击按钮后看看有没有错误输出，如果有，根据状态码去查后端的问题（比如是不是返回了404、500）。

2. 检查元素绑定是否失效 #

如果你的.devour按钮是动态生成的（比如页面加载后通过JS添加到DOM里的），直接用.on("click", ".devour")绑定事件会失效——因为绑定的时候元素还不存在。这时候改成事件委托：

// 绑定到document或者更接近的父容器上都可以
$(document).on("click", ".devour", function(event) {
  event.preventDefault();
  var id = { id: $(this).attr("id") };
  $.ajax("/", {
    type: "PUT",
    data: id,
  }).then(function() {
    console.log("Updated Burger");
    location.reload();
  }).fail(function(err) {
    console.error("请求出错:", err);
  });
});

事件委托会监听父元素的点击事件，再判断触发源是不是.devour，这样动态生成的元素也能正常触发事件。

3. 检查页面是否有其他JS错误 #

有时候页面里其他脚本报错，会阻断后续代码执行。打开控制台的"Console"标签，看看有没有红色的错误提示，先解决那些错误再测试。

4. 确认后端返回的响应状态 #

在浏览器的"Network"标签里，找到这个PUT请求，查看它的状态码（应该是200、201这类成功码）和响应内容。如果后端返回的是重定向（3xx）或者错误（4xx/5xx），Ajax会判定请求失败，不会进入then回调。

先按这几步排查，应该能找到问题所在～

内容的提问来源于stack exchange，提问作者Benjamin D.