5

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

如果用户反复滥用导航菜单项，我注意到一些奇怪的行为。

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

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

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

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

4

3 回答 3

8

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

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

    pane.hide();
    pane.load("welcome.php", function() {
        pane.fadeIn();
    });
});
于 2012-09-26T08:33:14.593 回答
1

您可以链接您的方法：

 $("#homeLink").click(function(){
    $("#contentPane").hide().load('welcome.php', function() {
        $(this).fadeIn();
    });
 });
于 2012-09-26T08:35:17.073 回答
1

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 对象。它将包含属性，您可以使用这些属性来查看出了什么问题以及许多其他事情。在您的情况下，最好在请求完成时使用回调来加载页面。

于 2012-09-26T08:41:11.587 回答