浏览器后退/前进加载页面时Ajax脚本无法更新数据库的问题

看起来你碰到的是浏览器**往返缓存（BF Cache）**和GET请求缓存导致的典型问题，我来帮你拆解原因并给出可行的解决办法：

问题根源 #

当通过浏览器后退/前进按钮加载页面时，浏览器通常会从BF Cache中直接恢复页面的状态，而不是向服务器发起全新的请求。同时你的Ajax请求用的是默认的GET方法——GET请求天生容易被浏览器缓存，这就导致虽然success回调执行了（弹出了'haha'），但浏览器其实没有真正发送新的请求到服务器，自然不会触发数据库的增量更新。

解决方案 #

1. 改用POST请求（最推荐）

POST请求默认不会被浏览器缓存，能确保每次都向服务器发送新请求，同时也更符合“修改数据库”这类操作的语义：

function IncreasePopularity(){
    var hiddenid = <?php echo $id; ?>; //$id为被评分用户的ID
    $.ajax ({
        url: 'IncreasePopularity.php',
        method: 'POST', // 指定请求方法为POST
        data: { id: hiddenid }, // 用对象形式传参更规范易维护
        success: function(data){
            alert('haha');
        }
    });
}

记得在IncreasePopularity.php里改成用$_POST['id']来接收参数，替代原来的$_GET['id']。

2. 若必须用GET，添加随机参数规避缓存

在请求参数里加上时间戳或随机数，让每次请求的URL都唯一，浏览器就不会复用缓存的响应了：

function IncreasePopularity(){
    var hiddenid = <?php echo $id; ?>;
    $.ajax ({
        url: 'IncreasePopularity.php',
        data: { 
            id: hiddenid,
            _t: Date.now() // 添加时间戳参数，确保请求URL唯一
        },
        success: function(data){
            alert('haha');
        }
    });
}

3. 服务器端禁止接口缓存

在IncreasePopularity.php的开头添加缓存控制响应头，强制浏览器每次都请求最新内容：

<?php
// 设置缓存控制头，禁止缓存
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1规范
header("Pragma: no-cache"); // 兼容HTTP 1.0
header("Expires: 0"); // 让代理服务器也不缓存

// 你的数据库更新逻辑代码...
?>

4. 用pageshow事件确保函数触发

有时候BF Cache恢复页面时，$(document).ready可能不会被触发（虽然你这里alert弹出了，但保险起见），改用pageshow事件能覆盖页面从缓存恢复的场景：

$(window).on('pageshow', function(event) {
    // 判断页面是否从BF Cache恢复
    if (event.originalEvent.persisted) {
        IncreasePopularity();
    } else {
        // 正常加载页面时也执行
        IncreasePopularity();
    }
});

总结 #

优先推荐改用POST请求的方案，既能彻底解决缓存问题，也更符合Web开发的最佳实践。如果不想调整请求方法，添加随机参数或服务器端禁用缓存也能达到目的。

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