AJAX - 重新加载网页的一部分，而无需使用单独的文件加载

Question

标题可能有点令人困惑，所以让我解释一下。

我的网站有一个侧面板，其中包含有关用户的信息，用户可以执行的操作等。当用户未登录时，此侧面板将成为登录或注册的区域。

这个代码是：

<?php
if($user->loggedIn)
{
?>
<!-- side-panel for logged in users here -->
<?php
}
else
{
?>
<!-- login/registration etc -->
<?php
}
?>

我想要做的是当用户点击使用AJAX登录时再次加载此代码片段，并使用jQuery效果（可能是淡入淡出），这样可以平滑地使侧面板从登录/注册过渡到闪亮的用户面板。

我知道如果我将该代码放在另一个文件中，并通过AJAX将其加载到侧面板的div中，我可以这样做...但我不想仅为侧面板创建单独的文件。这可能吗？

Answer 1

您可以使用AJAX请求加载页面，然后删除侧面板以外的数据，但有什么意义呢？您最好的选择是将侧面板分成自己的文件。

哦，这也被认为是正确的方法，所以你可以编辑侧边栏而无需编辑它出现的页面。

Answer 2

如果我理解你需要什么，你可以尝试这样：

$.ajax({
    type: "GET",
    url: "url", // replace 'url' with your url
    cache: false,
    success: function(data){
        alert($(data).find('#sidebar').html());
    }
});

也许可以使用$ .load（）或$ .get（），dunno。

Answer 3

您为什么反对将侧面板保留在自己的文件中？使事物更加模块化和有条理。

如果你真的反对将内容保存在文件中，你可以将内容放在数据库中，并在进行AJAX调用时查询它。

Answer 4

您是否可以将查询字符串参数传递给页面，然后根据该参数仅执行页面的部分渲染（仅限侧边栏）？ 然后只需使用普通的jquery / ajax方法并包含查询字符串参数。

$.ajax(function(){
    url: MyPage.php?sidebar_only=true
    ect...
})

Answer 5

假设您将通过另一个呼叫获取实际用户数据，您可以使用两个div。包含用户面板的html的div开始隐藏。成功登录后，隐藏登录div并显示用户面板div。使用AJAX登录中的数据，填写面板自定义信息。我假设AJAX登录调用将返回必要的信息以填写用户名以及他们可以做什么。这只是为了让你不必为整个用户面板提供html。