Question

我正在写一个Javascript函数有些困难。该脚本的基本功能是，当调用特定的AJAX函数并返回成功时，它会从文件中加载一些HTML并将该HTML插入主页上，然后（一旦加载）在父div中淡入。 / p>

    jQuery.ajax({
    type: "POST",
    url: "fns/authenticate.php",
    data: dataString,
    success: function (data) {
        if (data=='1') {
            jQuery("#authlogin").fadeOut(500, function(){
                $(this).remove();                   
                jQuery("#result").load("fns/logic.html", function() {
                    jQuery('#authtrue').fadeIn(1000);
                });
        });
        } else {
            jQuery('#details-error').fadeIn(200);
        }
    }
});

return false;

现在AJAX似乎运行正常，因为它将在正确的条件下执行并淡出并在正确的div中，问题似乎是内容不是从logic.html或它加载的没有正确绑定#result div。

主页的html如下：

<div id="authlogin">
<!-- HTML form -->
</div>

<div id="authtrue" style="display: none;">
<div id="result"></div>
</div>

非常感谢任何帮助。

Answer 1

这是您必须自行解决的问题之一，因为我们无法访问您的fns/logic.html，因此无法完全测试。

然而，有些想法：

（1）.load()成功函数的基本逻辑似乎是正确的。 Here is a jsFiddle近似于AJAX成功函数的逻辑。 我将.html()替换为.load()，因为jsFiddle无法执行ajax。无论如何，假设.load()正在做它应该做的事情，那部分应该正常工作。

（2）您可能已经知道这一点，但请注意.load()是$.ajax()的简写 - .post()和.get()。您可能会发现$.ajax()更容易排除故障，因为代码块更具结构性。 作为一般规则，对排除速记结构进行故障排除比排除$.ajax()

更加抽象/困难

（3）在Chrome中使用开发者工具（按F12键）以验证logic.html内容已插入#result div。你可能会发现，正如我在玩jsFiddle时所做的那样，内容被注入，但#authtrue div仍然隐藏。至少你会知道找到了logic.html文件并插入了内容。 确切地知道问题所在，找到/修复其余部分现在可能是微不足道的。

（4）您的logic.html文件是否包含不必要的标题信息？如果是这样，您可以通过仅插入文档的BODY或包含div的顶级来删除它。 jQuery文档的See this section：

jQuery("#result").load("fns/logic.html #container", function() {//CALLBACK IN HERE});

（5）创建一个仅使用各种方法加载logic.html文档的测试文档是一个明智的想法：

方法A：使用PHP（或您使用的任何服务器端语言）

<div id="authlogin">
    <!-- HTML form -->
    <input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
    <div id="result"><?php include 'logic.html'; ?></div>
</div>

方法B：使用load()

HTML：

<div id="authlogin">
    <!-- HTML form -->
    <input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
    <div id="result"></div>
</div>

jQuery的：

jQuery('#authtrue').show();
jQuery("#result").load("fns/logic.html");

（6）确保目标元素jquery选择器中没有拼写错误：If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.（from the docs）

Answer 2

我自己解决了这个问题，感谢大家的帮助。它最终成为浏览器缓存问题。一旦我清除了缓存，一切都神奇地起作用。

在AJAX调用中加载HTML

2 个答案: