在 AJAX 调用中加载 HTML答案

【问题标题】：Load HTML within AJAX call在 AJAX 调用中加载 HTML
【发布时间】：2014-09-23 21:16:30
【问题描述】：

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

    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>

任何帮助将不胜感激。

【问题讨论】：

}); 某处似乎缺少右括号，可能是这样吗？
标记中的#authlogin 在哪里？您正在回调中删除它。 #result 不包含在其中吗？
注意：snipplet 是用于发布代码的错误选择。
那些右括号应该在那里，在发帖时是一个错误。现已修复，连同 snipplet 问题。我还添加了 authlogin 在 html 上下文中的位置
找到logic.html 文件了吗？记录状态。 api.jquery.com/load/#example-1

标签： javascript jquery html ajax web

【解决方案1】：

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

然而，一些想法：

(1) .load() 成功函数的基本逻辑似乎是正确的。 Here is a jsFiddle 近似于 AJAX 成功函数的逻辑。 我用.html() 代替了.load()，因为 jsFiddle 不能做 ajax。无论如何，假设 .load() 正在做它应该做的，那部分应该可以工作。

(2) 您可能已经知道这一点，但请注意.load() 是$.ajax() 的简写——.post() 和.get() 也是如此。您可能会发现 $.ajax() 更容易排除故障，因为代码块更加结构化。 一般来说，解决速记结构的问题比解决$.ajax()987654334@

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

(4) 您的logic.html 文件是否包含不必要的标头信息？如果是这样，您可以通过仅插入文档的 BODY 或包含顶级 div 的方式将其删除。 See this section 的 jQuery 文档：

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)

【讨论】：

【解决方案2】：

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

【讨论】：

非常感谢您告诉我们最终解决方案。