8

AJAX 呼び出しを行って HTML を取得し、それをページの div に押し込むための簡単な JS/jQuery コードがいくつかあります。これは Firefox では問題なく動作しますが、Chrome では失敗します。

Chrome コンソールで、「(failed)」というステータス テキストと「pending」と入力された AJAX リクエストを確認できます。

私が行ったすべての検索は、クロスドメインの問題に関連しています。これはここには収まりません。ポート番号を追加せずに、ドメイン名を使用してWebサーバーでこれを実行しています。

これが私のコードサンプルです（最初は.load（）を使用しようとしていたことがわかりますが、同じ問題です）：

$('#brochure2012navigation a').click(function(event)
{
    event.preventDefault();

    //$('#brochurePage').load($(this).attr('href'));

    $.ajax({
        url: $(this).attr('href'),
        dataType: 'html',
        success: function(html) {
            $('#brochurePage').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr);
            console.log(thrownError);
        },
    });
});

Chrome のコンソールでは、ログに記録された xhr オブジェクトは次のようになります。

Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
abort: function (a){a=a||"abort",p&&p.abort(a),w(0,a);return this}
always: function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
complete: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
done: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
error: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
fail: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
getAllResponseHeaders: function (){return s===2?n:null}
getResponseHeader: function (a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c}
isRejected: function (){return!!i}
isResolved: function (){return!!i}
overrideMimeType: function (a){s||(d.mimeType=a);return this}
pipe: function (a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()}
progress: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
promise: function (a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}
readyState: 0
responseText: ""
setRequestHeader: function (a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this}
state: function (){return e}
status: 0
statusCode: function (a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this}
statusText: "error"
success: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
then: function (a,b,c){i.done(a).fail(b).progress(c);return this}
__proto__: Object

見づらくて申し訳ありませんが、重要なのは0のステータスだと思います。

ログを監視すると、リクエストがサーバーにヒットしていません。

ここで本当に困惑しています。助けていただければ幸いです。

乾杯、アル

4

9 に答える 9

5

AdBlock Chrome アドオンによって ajax 呼び出しがブロックされる可能性があります。

adblock ブラックリストのキーに基づいて、一部の URL がブロックされる場合があります。DevTools の [Network] タブでは、このようなリクエストは「失敗」としてマークされ、ステータスは「保留中」になります。

于 2013-09-24T14:45:05.197 に答える
1

コードは完璧に見えますが、コードにいくつかのタイプミスが見られます。他の要素をいくつか追加しました

 $('#brochure2012navigation a').click(function(event){
    event.preventDefault();
    $.ajax({
       url: $(this).attr('href'),
       dataType: 'html',
       async:false, // <------------------try with adding this
       type:'post', // <------------------try adding this too
       success: function(data) {
         $('#brochurePage').html(data);
       },
       error: function (xhr, ajaxOptions, thrownError) {
         console.log(xhr);
         console.log(thrownError);
       } // <----------------------comma found here
    });
});

または、これに興味があるかもしれません：

 $('#brochure2012navigation a').click(function(event){
    event.preventDefault();
    $.ajax({
       url: $(this).attr('href'), 
       type:'POST',
       success: function(response, status, xhr){ 
             var ct = xhr.getResponseHeader("content-type") || "";
             if (ct.indexOf("html") > -1) {
                $('#brochurePage').html(data);
             }
             if (ct.indexOf("json") > -1) {
                // handle json here
             }  
       },
       error: function (xhr, ajaxOptions, thrownError) {
         console.log(xhr);
         console.log(thrownError);
       }
    });
  });
于 2013-02-01T12:17:43.743 に答える
0

コードに小さな変更を加えました。

var url = $(this).attr('href');
$.ajax({
    url: url,
....

その後、jsfiddleで動作するようにコードを設定しました。

http://jsfiddle.net/kyz69/1/

/ _display /（http://fiddle.jsshell.net/_display）のコンテンツを取得しています。ロードしようとしているURLを指定しなかったため、リンクしています。これが唯一のページでした。クロスドメインではないため、データが返されることがわかります。

Windows +GoogleChromeバージョン24.0.1312.52mでコードをテストしました

フィドルをテストして、結果をここに投稿できますか？

于 2013-01-26T14:43:29.253 に答える
0

エラー関数の閉じ中括弧の後の末尾のコンマでしょうか? 通常、追加のオブジェクトがある場合にのみコンマを配置します...

于 2013-01-29T00:39:37.537 に答える
0

詳細を尋ねるためにコメントを投稿するのに十分な評判があればいいのですが、そうしません。ですので、経験に基づいた最善の推測をします。

クロスドメインの問題である場合、Chrome はコンソールに赤でエラー メッセージを記録します。この Fiddle でテストします。

私が知っている方法の 1 つは、スニファーを使用することです。幸いなことに、Chrome にはChrome Developer Toolを押すことで簡単な が組み込まれCtrl + Shift + Iています。コンソール出力をコピーしたので、おそらくこれを知っていると思いますが、今回はNetworkタブに移動し、このクリックをトリガーするリンクをクリックしたときに開いたままになっていることを確認してください。イベントハンドラ。

テーブルに新しいレコードが表示され、その名前をクリックすると、リクエストとレスポンスのヘッダー、またはレンダリングされたレスポンスを見ることができます。私は通常ここで私のものを入手するので、これがより役立つ情報を提供することを願っています.

于 2013-01-29T21:26:28.430 に答える
0

これを試さない理由

$('#brochurePage').load($(this).attr('href'),function(){
alert('Load was performed.');
});

幸運を！

于 2013-01-30T00:02:00.987 に答える
0

ajax または json の最後の属性がコンマで終わっていません。間違いなく chrome と IE で失敗していましたが、なぜ firefox でうまく動作するのか、私は困惑しています :)、これを試してください:

    $('#brochure2012navigation a').click(function(event)
{
    event.preventDefault();

    //$('#brochurePage').load($(this).attr('href'));

    $.ajax({
        url: $(this).attr('href'),
        dataType: 'html',
        success: function(html) {
            $('#brochurePage').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr);
            console.log(thrownError);
        }
    });
});
于 2013-01-31T12:06:10.967 に答える
0

サーバーがリクエストを受け取っていない場合は、使用している URL に問題があるはずです。

プロトコルと完全な URL を入力していますか、それとも部分的に入力していますか?

リンクをハードコーディングして使用するとどうなりますか? (以下のように)

$('#brochure2012navigation a').click(function(event)
{
    event.preventDefault();

    //$('#brochurePage').load($(this).attr('href'));

    $.ajax({
        url: $(this).attr('http://www.google.com'),
        dataType: 'html',
        success: function(html) {
            $('#brochurePage').html(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr);
            console.log(thrownError);
        },
    });
});

もし私があなたなら、最初に既知のターゲットをハードコーディングすることで、 $.ajax が実際にターゲットに到達していることを確認します。

ハードコードされたターゲットがリクエストを受けていない場合、問題は別の場所にあります。

于 2013-02-01T00:26:28.337 に答える
0

ほとんどのブラウザーは、クロスドメイン スクリプティングの問題である場合、実際には興味深いエラーを返しません。あなたが示したように、私が使用したものはどれも「エラー」のStatusTextと0のreadyStateを返します。実際には同じドメイン、おそらく別のサブドメインまたは別のポート (https/非 https) から何かを呼び出しているため、クロスドメイン アクションが発生していないと考えているかもしれません。古いバージョンの Firefox を使用している可能性があります。これは、クロスドメインの制限を補っていません。過去のポスターが示唆したようにネットリクエストを見て、プロパティを探すことでChromeで確認できます：「Origin：null」

実際にクロスドメインの問題であることが判明した場合 (私はそうだと思います)、次の行の PHP (または選択したバックエンド言語の同様のヘッダー) をファイルの先頭に追加する必要があります。 HTMLコードの前にリクエストします。

<?php header("Access-Control-Allow-Origin: example.com"); ?>

jquery を使用する場合は、以下も必要になる場合があります。

<?php header("Access-Control-Allow-Headers: x-requested-with"); ?>
于 2013-01-31T22:22:05.660 に答える