0

私はこのコードを持っています：

function loadPage(page, link) {
            if ($('div#content').attr('current') != page) {
                $('div#content').load(page, '', function (responseText, textStatus, XMLHttpRequest) {
                    if (textStatus == 'error') {
                        $('div#content').html("<?php include 'error/404.php' ?>");  
                    };
                });
                var html = $('div#content').html();
                if (html != "<?php include 'error/404.php' ?>") {
                    $('div#content').hide().fadeIn('slow').attr('current', page);
                };
                $('div#header div#bottom div#nav ul#main li a').removeClass('active');
                $(link).addClass('active');
            };
        };

divのhtml（div＃contentに配置されたばかりの「error / 404.php」のHTML）とソースのhtml（error / 404.php）を比較すると、なぜそうではないのかわかりません。同じで、本当の道をたどりません。

助けてくれる人はいますか？

4

2 に答える 2

2

ここにはいくつかの混乱があるはずです、行：

$('div#content').html("<?php include 'error/404.php' ?>");

ほとんどの場合、あなたがやりたいことではありません。この時点では、ブラウザを使用しているため、応答が生成されたときのようにバックエンドにアクセスすることはできません。div#contentこれは、リテラルhtml文字列を要素に挿入するだけでerror/404.phpあり、javascriptランドからスクリプトを実行する方法はありません。

おそらくやりたかったのは、を実行するサーバーに新しいリクエストを作成し、error/404.phpその出力をjavascript呼び出しに返して、ドキュメントに挿入できるようにすることです。この一般的な考え方はAJAXと呼ばれ、特別な場合には、jQueryの.load（）メソッドを使用して次のようにすることができます。

$('div#content').load('http://insert-full-url-here.com/error/4o4.php');

アップデート：

.load()もう1つの問題は、比較のための非同期性です。Javascriptはシングルスレッド環境であるため、何かを.load()-edするように要求すると、それが完了するのを待たずに、トラフを実行し、応答が戻ったときにコールバックを開始します。次のような最初のロード：

$('div#content').load(page, '', ....

そのすぐ下の条件の場合、DOMツリーは終了および変更されません。

if (html != "<?php include 'error/404.php' ?>")

実行されます。

負荷が実際に戻ったときに、コードのその部分を実行する必要があります。これ.load()を使用すると、奇妙な文字列を比較せずに、slideDown条件をコールバックに直接移動できます。

$('div#content').load(page, '', function (responseText, textStatus, XMLHttpRequest) {
    if (textStatus != 'error') { // flipped the condition to NOT error
        $('div#content').hide().fadeIn('slow').attr('current', page); // do the part of the second test
    };
});

ロードが行われた後、または前に、残りの2行をいつ実行する必要があるかわかりません。エラーが発生していないときに実行する必要がある場合は、div内に配置します。エラーが発生しても実行する必要がある場合は、ロード後に.load()'コールバック内に配置します。

新しいjQueryは、ajax関連の呼び出しからcommonjspromiseベースのjqxhrオブジェクトを返すため、構文は次のようになります。

$.get(page).done(function(resp){ // the .done() is called when there were no error
    $('div#content').html(resp);
    // anything you want to run on content get success
});
于 2012-08-08T20:18:16.777 に答える
0

あなたのコードを見ただけでは正確にはわかりませんが、森から抜け出す道は次のとおりです。

    function loadPage(page, link) {
        if ($('div#content').attr('current') != page) {
            $('div#content').load(page, '', function (responseText, textStatus, XMLHttpRequest) {
                if (textStatus == 'error') {
                    $('div#content').html("<?php include 'error/404.php' ?>");  
                };
            });
            var html = $('div#content').html();

            console.log(html); //Check the Value of html right before it is 
                               //compared. You might be surprised to see something 
                               //like 'undefined' or 'null' as the value. This 
                               //means html is comparing correctly, but is not 
                               //being instantiated properly.

            if (html != "<?php include 'error/404.php' ?>") {
                $('div#content').hide().fadeIn('slow').attr('current', page);
            };
            $('div#header div#bottom div#nav ul#main li a').removeClass('active');
            $(link).addClass('active');
        };
    };
于 2012-08-08T20:17:42.323 に答える