AJAX调用DELETE删除数据后GET请求仍返回已删除记录如何解决

你当前使用的是异步AJAX请求，deleteByName函数中调用send()发送DELETE请求后，不会等待服务端处理完成就会直接执行后续的search("all")，此时DELETE操作还没在数据库中生效，GET请求拿到的就是删除前的旧数据。另外你全局共用同一个request实例，多个异步请求会互相抢占覆盖响应内容，也会导致结果异常。

1. 改造deleteByName函数，等待DELETE操作完成后再触发查询 #

给DELETE请求绑定状态监听回调，只有确认服务端返回成功响应后，再调用搜索更新页面，同时每个请求单独创建XMLHttpRequest实例避免冲突：

function deleteByName (target,view,view_value){
    // 每个请求单独创建XHR实例，避免全局共用冲突
    const delRequest = new XMLHttpRequest();
    const url = "http://localhost/assignment_web/index.php/facility/name/"+target;
    delRequest.open("DELETE", url, true);
    // 监听DELETE请求状态
    delRequest.onreadystatechange = function() {
        // 确认DELETE请求完成且响应成功
        if (delRequest.readyState === 4 && delRequest.status === 200) {
            search("all");
        }
    };
    delRequest.send(null); 
}

2. 优化search函数修复逻辑缺陷 #

原代码中存在|位运算符误用为逻辑或的问题，同时也改为单独创建XHR实例，避免请求冲突：

function search(type) {
    let target = "" ; 
    // 原代码单|是位运算，改为双||逻辑或才符合判断需求
    if(type === "district" || type === "name"){
        target = document.getElementById('option_txt').value;
    }
    const searchRequest = new XMLHttpRequest();
    const url = "http://localhost/assignment_web/index.php/facility/"+type+"/"+target;
    searchRequest.open("GET", url, true);
    searchRequest.onreadystatechange = function() {
        if (searchRequest.readyState === 4 && searchRequest.status === 200) {
            const serverData = searchRequest.responseText;
            console.log("serverData: "+serverData);
            const dataArr = JSON.parse(serverData);
            const objLen = Object.keys(dataArr).length;
            const view = document.querySelector('input[name="option"]:checked').value;
            let view_value; 
            let html = "<ul>";
            for(let i=0;i<objLen;i++){
                const name = dataArr[i].Name_en ; 
                if(view === "district"){
                    view_value = dataArr[i].District_en;
                }else if(view === "name"){
                    view_value = dataArr[i].Name_en;
                }else{
                    view_value = "all" ; 
                }
                html += `<li>District : ${dataArr[i].District_cn}&nbsp${dataArr[i].District_en}</li>...<li><button onclick='deleteByName("${name}","${view}","${view_value}")' type='button'>delete</button><div name="${name}_textBox" id="${name}_textBox"></div></li><hr>`;
            }   
            html += "</ul>";
            document.getElementById("displayArea").innerHTML = html;
        }
    };
    searchRequest.send(null);
}

如果修改后还是能查到旧数据，可以检查服务端DELETE接口是否没有做事务提交，或者GET接口存在缓存，可给GET请求的URL拼接随机参数（比如url + "?t=" + Date.now()）避免缓存影响。

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