为何调用窗口刷新函数后PUT请求未正常发送？

核心原因 #

你使用的是异步AJAX请求（xhttp.open的第三个参数为true，这是默认的异步模式）。调用xhttp.send(json)后，浏览器不会等待请求完成，会立即执行后续的refreshWindow()刷新页面。页面刷新会中断所有未完成的网络请求，导致PUT请求还没来得及发送到后端就被终止了。

修复方案 #

要确保PUT请求成功完成后再执行页面刷新，只需给XMLHttpRequest添加请求完成的回调事件：

修改deleteProject函数，增加请求成功后的处理逻辑：

function refreshWindow() {
    window.location.reload();
}

function deleteProject(pid) {
    if (confirm("Are you sure you want to delete this project?")) {
        const xhttp = new XMLHttpRequest();
        var data = {
            id: pid,
            action: "delete"
        };
        var json = JSON.stringify(data);
        
        xhttp.open("PUT", currenturl, true);
        xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
        
        // 监听请求成功完成的事件
        xhttp.onload = function() {
            // 验证请求状态码，确保后端处理成功
            if (this.status >= 200 && this.status < 400) {
                refreshWindow(); // 请求成功后再刷新页面
            } else {
                alert("删除失败，请稍后重试");
            }
        };
        
        // 处理请求出错的情况（比如网络问题）
        xhttp.onerror = function() {
            alert("请求出错，请检查网络连接");
        };
        
        xhttp.send(json);
    }
}

// 现在这个函数只需调用删除逻辑即可
function deleteProjectRefresh(pid) {
    deleteProject(pid);
}

之后你的HTML元素不需要修改，依旧可以使用：

<img onclick="deleteProjectRefresh({{ project[0][0] }})" title="Delete" src="../static/img/Delete Button.png"></td>

额外说明 #

如果你执意要用同步请求（不推荐），可以将xhttp.open的第三个参数改为false，但这会在请求过程中阻塞页面，导致用户无法操作，体验很差，因此优先推荐异步+回调的方案。

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