Question

我有这段代码：

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（来自＆＃39; error / 404.php＆＃39;刚被放入div＃内容的HTML）与源html进行比较（错误） /404.php），它不是一样的，并没有遵循真正的道路。

任何帮助人员？

Answer 1

这里必定存在一些混淆：

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

很可能不是你想做的。此时您处于浏览器中，您无法访问后端，就像您在生成响应时回来一样。这只将文字html字符串插入div#content元素，它无法从javascript域运行error/404.php脚本。

您可能想要做的是将新请求发回到将运行error/404.php的服务器，并将其输出返回到javascript调用，以便您可以将其插入到文档中。这个一般的想法叫做AJAX，对于你的特殊情况，你可以使用jQuery的.load()方法来做到这一点：

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

更新

另一个问题是.load()与您的比较的异步。 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
    };
});

我不确定剩余的两行是否应该在加载发生之后或之前运行。如果他们需要在没有错误发生的情况下运行就把它放在div中，如果他们需要运行而不管错误但是在加载之后将它们放在.load()的回调中。

较新的jQuery从ajax相关调用返回基于commonjs promise的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
});

Answer 2

我无法通过查看您的代码来确切地说出来，但这里有一条走出困境的道路：

    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');
        };
    };

jQuery比较问题

2 个答案:

更新