0

jQuery経由でajaxを使用してCAPTCHA画像（および非表示のデータフィールド）を取得し、DOMの準備ができた後にフォームにドロップする連絡先フォームを作成しています。また、CAPTCHA 画像をクリックすると、画像 (および非表示のデータ フィールド) がリロードされます。

CAPTCHA 画像作成スクリプトは、私が数年間使用してきた独自の作成物です。かなり堅牢で正常に動作しますが、ajax を介して Web サイトに統合しようとしたのはこれが初めてです。

大まかに言えば、次の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スクリプトを簡単に説明すると、通常、テキストに基づいて画像を生成し、コンテンツを暗号化してファイル名として使用します（タイムスタンプサフィックス付き）-画像は一意の名前でキャッシュされます. したがって、CAPTCHA スクリプトは、使用されるたびに完全に一意の異なるファイル名を提供します。

私はまだjQueryに完全に対応していませんが、私が知っている限りjQueryのajaxキャッシングをオフにしているので、何が問題なのかわかりません...誰か助けてくれますか?

4

1 に答える 1

7

上記の私のコメントに基づいて、ここでは 2 つのレベルのキャッシュ (要求と応答) が発生する可能性があります。cache: falseブラウザでのリクエストのキャッシュを防ぐには、$.ajax呼び出しで使用するだけで十分です。

ただし、サーバー レベルでは、ブラウザーが応答をキャッシュする方法を正しく解釈するために、適切な応答ヘッダーを設定する必要があります。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、Bondyが投稿したリンクを介した回答には、別の修正があります：

$.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");
    }
});

通話にdata: '',行を追加してみてください。$.ajax()エラー コールバックのデータをさらに調べて、奇妙なエラー コードが戻ってくるかどうかを確認することもできます。

于 2012-09-04T13:26:36.843 に答える