Javascript 在AJAX调用中加载HTML

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

---

任何帮助都将不胜感激。

这是您必须自己解决的问题之一，因为我们无法访问您的

fns/logic.html

，因此无法完全测试

然而，一些想法：

（1）

.load（）

成功函数的基本逻辑似乎是正确的。这近似于AJAX成功函数的逻辑。我用

.html（）

代替了

.load（）

，因为JSFIDLE不能做ajax。无论如何，假设

.load（）

正在做它应该做的事情，那么该部分应该可以工作

（2） 您可能已经知道这一点，但请注意，

.load（）

是

$.ajax（）

的简写形式，正如

.post（）

和

.get（）

一样。您可能会发现

$.ajax（）

更容易进行故障排除，因为代码块更结构化。一般来说，对速记结构进行故障排除比对

$.ajax（）

（3） 使用Chrome中的开发者工具（按F12键）验证

logic.html

的内容是否已插入

#result

div。您可能会发现，正如我在玩JSFIDLE时所做的那样，内容已被注入，但

#authtrue

div仍处于隐藏状态。至少您会知道，

logic.html

文档已经找到并插入了内容。知道问题的确切位置后，找到/修复其余问题现在可能就变得微不足道了

（4） 您的

logic.html

文件是否包含不必要的头信息？如果是这样，只需插入文档的正文或jQuery文档的顶层包含div.即可将其删除：

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

（5） 使用各种方法创建一个只加载

logic.html

文档的测试文档将是一个明智的想法：

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

jQuery：

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

---

（6） 确保目标元素jquery选择器中没有输入错误：

如果选择器没有匹配任何元素-在本例中，如果文档不包含id=“result”的元素-Ajax请求将不会被发送。

（）

多亏了这里所有人的帮助，我自己解决了这个问题。这最终导致了浏览器缓存问题。当我清除缓存时，一切都神奇地工作了。

似乎在某处缺少了一个右括号（

）

，可能就是这样吗？标记中的#authlogin在哪里？您正在回调中删除它#结果没有包含在里面，是吗？注意：snipplet是发布代码的错误选择。这些括号应该在那里，在发布时是一个错误。现在修复了snipplet问题。我还添加了authlogin在htmlIs上下文中的位置，它可以找到

logic.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('#authtrue').show();
jQuery("#result").load("fns/logic.html");