jQuery ajax 和 Chrome 缓存问题？

Question

我正在构建一个联系表单，它通过 jQuery 使用 ajax 来获取 CAPTCHA 图像（和隐藏的数据字段）并在 DOM 准备好后将其放入表单中。此外，当点击验证码图像时，它会重新加载图像（以及隐藏的数据字段）。

验证码图像创建脚本是我自己创建的，我已经使用了几年 - 它非常强大并且工作正常，但是这是我第一次尝试通过 ajax 将它集成到网站。

粗略地说，我有以下 jQuery。我认为支持的 HTML/CSS/PHP 无关紧要 - 如果需要，我可以提供一些，但一切似乎都很好......问题似乎与 jQuery 或 Chrome 浏览器缓存有关......

$(document).ready(function() {
    commentFormCaptchaWrapper = $('#captchawrapper');

    // Check DOM for CAPTCHA wrapper... if it's there get the CAPTCHA image
    if (commentFormCaptchaWrapper.length > 0) {getCaptchaImage()}

    // If the CAPTCHA image is clicked get a new one
    commentFormCaptchaWrapper.click(getCaptchaImage);
});


function getCaptchaImage(){
    commentFormCaptchaWrapper.html();
    $.ajax({
        url: '/captcha/ajax.captcha.php',
        type: 'post',
        cache: false,
        success: function(response){
            commentFormCaptchaWrapper.html(response);
        },
        error: function(response){
            alert ("Ajax Error");
        }
    });
}

在 Firefox（实际上还有 Opera 和 IE）中，一切都完全按照我希望的方式运行，但在 Chrome 中却无法运行。在 Chrome 中，对 CAPTCHA 图像和隐藏字段的初始 ajax 调用工作正常，但是当您单击 CAPTCHA 时，会出现短暂的闪烁，因为 Captchawrapper div 已清空（因此检测到单击正常），但它会重新加载相同的图像。

为了简要解释我的验证码脚本，通常它会根据一些文本生成图像并加密内容以用作文件名（带有时间戳后缀） - 然后使用唯一名称缓存图像。因此，CAPTCHA 脚本每次使用时都会提供一个完全不同的文件名。

我还没有完全跟上 jQuery 的速度，但是据我所知，我已经关闭了 jQuery 中的 ajax 缓存，所以我不知道出了什么问题……谁能帮忙？

Answer 1

根据我上面的评论，这里可能会发生两个级别的缓存（请求和响应）。在 $.ajax 调用上使用 cache: false 应该足以防止浏览器缓存请求。

但是，在服务器级别，必须为浏览器设置正确的响应标头，以正确解释它应该如何缓存响应。对于 PHP，典型的一组“不缓存！”标题可能看起来像这样（至少）：

$ts = gmdate("D, d M Y H:i:s") . " GMT";
header("Expires: $ts");
header("Last-Modified: $ts");
header("Pragma: no-cache");
header("Cache-Control: no-cache, must-revalidate");

OTOH，在通过 Bondye 发布的链接的答案中，还有另一个修复：

$.ajax({
    url: '/captcha/ajax.captcha.php',
    type: 'post',
    data: '', // <-- Add this!
    cache: false,
    success: function(response){
        commentFormCaptchaWrapper.html(response);
    },
    error: function(response){
        alert ("Ajax Error");
    }
});

尝试在您的$.ajax() 通话中添加data: '', 行。您还可以进一步检查错误回调中的数据，看看是否返回了奇怪的错误代码。