Ajax提交后PHP脚本未完成，前端刷新函数提前执行的解决办法

核心问题是submitAjax是异步AJAX请求，点击按钮后refreshPostResults会立刻执行，此时后台的POST请求还未完成，所以GET到的还是旧数据。下面提供两种可行方案，优先推荐第一种，几乎不影响现有代码：

方案1：给submitAjax添加返回值（推荐，无副作用） #

虽然你提到不想修改submitAjax，但这个修改极其微小，不会影响全站任何现有调用——只是让它返回jQuery AJAX的请求对象，原有调用完全不受影响。

修改submitAjax：

function submitAjax(Data){
    // 添加return，返回$.ajax的jqXHR对象（自带Promise接口）
    return $.ajax({
        type: "POST",
        url: window.location,
        data: Data,
        datatype: 'json',
        success: function(response){
            var res = response;
        } 
    });
}

然后修改按钮的点击事件，利用done()方法等待POST请求完成后再执行刷新：

<button type="button" onclick="submitAjax({'addViewCount': 29}).done(refreshPostResults)">

这样就能保证只有当后台的数据库/会话修改完成后才会触发刷新，彻底解决时序问题，且对其他页面的submitAjax调用无任何影响。

方案2：不修改submitAjax，用全局AJAX事件监听 #

如果完全不能修改submitAjax，可以用jQuery的全局AJAX成功事件，过滤特定请求后执行刷新：

在页面脚本中添加这段代码：

$(document).on('ajaxSuccess', function(event, xhr, settings) {
    // 只监听目标POST请求
    if (settings.url === window.location.href 
        && settings.type === 'POST' 
        && settings.data.addViewCount === 29) {
        refreshPostResults();
    }
});

然后按钮只保留提交请求：

<button type="button" onclick="submitAjax({'addViewCount': 29})">

如果担心其他地方调用相同参数的submitAjax导致误触发，可以给提交数据加唯一标识：

<button type="button" onclick="submitAjax({'addViewCount': 29, 'needRefresh': true})">

再修改监听逻辑：

$(document).on('ajaxSuccess', function(event, xhr, settings) {
    if (settings.url === window.location.href 
        && settings.type === 'POST' 
        && settings.data.needRefresh) {
        // 删除标识避免干扰其他逻辑
        delete settings.data.needRefresh;
        refreshPostResults();
    }
});

额外优化建议 #

你的refreshPostResults使用了同步AJAX（open第三个参数为false），同步请求会阻塞浏览器导致操作卡顿，建议改成异步：

function refreshPostResults(){
   var xhttp = new XMLHttpRequest();
   xhttp.open("GET", "post.php", true); // 改为异步
   xhttp.onload = function() {
       // 请求成功后再更新DOM
       if (xhttp.status >= 200 && xhttp.status < 300) {
           document.getElementById("refreshPostResults").innerHTML += xhttp.responseText;
       }
   };
   xhttp.send(null);
};

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