Question

我正在使用jquery load将php页面加载到我的内容区域。

如果用户反复点击导航菜单项，我注意到了一些棘手的行为。

现在我的代码就像隐藏内容窗格，加载新页面，然后淡入一样简单：

 $("#homeLink").click(function(){
    $("#contentPane").hide();
    $("#contentPane").load("welcome.php");
    $("#contentPane").fadeIn();
 });

有问题的行为：点击新链接，窗格淡入上一页（然后更新到新页面）

我尝试使用$.ajax({async:false});，但这一切都持续存在。在这一点上，我正在考虑重新编写我的导航系统以根据url参数改变包含，除非可以提供一些见解，以便我可以阻止它排队第二次加载调用直到第一次加载完成？

Answer 1

您可以使用"complete"回调。它在请求完成时执行。

$("#homeLink").click(function() {
    var pane = $("#contentPane");

    pane.hide();
    pane.load("welcome.php", function() {
        pane.fadeIn();
    });
});

Answer 2

你可以链接你的方法：

 $("#homeLink").click(function(){
    $("#contentPane").hide().load('welcome.php', function() {
        $(this).fadeIn();
    });
 });

Answer 3

load方法可以带两个额外的参数：一组查询字符串键/值对，以及一个在load方法完成时执行的回调函数，无论它是成功还是失败。这是一个我们使用回调函数来通知结果的示例。通常，如果方法失败，您可能只会显示一条消息，但为了说明它是如何工作的，如果方法失败，我们也会这样做。通过请求不存在的文件，我确保它对于该示例失败：

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

如您所见，回调函数指定了3个参数，jQuery将为您填写。如果调用成功，第一个参数将包含结果内容。第二个参数是一个字符串，它指定呼叫的状态，例如“成功”或“错误”。您可以使用它来查看呼叫是否成功。第三个参数是用于执行AJAX调用的XMLHttpRequest对象。它将包含可用于查看出错的属性以及许多其他内容。在您的情况下，最好在请求完成时使用回调来加载页面。

jQuery加载，防止发生两次？

3 个答案: