Ajax/jQuery - 如何在不完全重新加载整个页面的情况下显示新元素并将页面加载到容器中？答案

【问题标题】：Ajax/jQuery - How to display new elements and load a page into a container without completly reloading the whole page?Ajax/jQuery - 如何在不完全重新加载整个页面的情况下显示新元素并将页面加载到容器中？
【发布时间】：2025-12-06 16:00:02
【问题描述】：

我正在尝试在不重新加载整个页面的情况下处理用户登录。我想要实现的是：

在初始页面访问时，登录面板显示在<div id="frame"></div>-container 中，这是网站的主要显示区域

当用户登录成功时：

容器<div id="info"></div> 应淡入网站标题，包含“登录为：用户名”和“注销”按钮等信息
登录表单应该淡出
应将新页面“overview.php”加载到<div id="frame"></div>，代替之前显示的登录表单

目前当通过$.ajax()登录成功时，'overview.php'被加载到id="frame"容器中，但只显示静态<html>元素，而不是正在被处理的元素PHP（即echo "Test";）。但是，如果我按 F5 重新加载整个网站，所有元素都会正确显示。

我认为这是由于 PHP 是在服务器端处理的。实现我想要做的事情的正确方法是什么？

index.php：

<div id="frame" class="center">
    <?php
        if(!isset($_SESSION['user']))
            include('./php/welcome.php');
        else
            include('./php/overview.php');
    ?>
</div>

welcome.php：

<div id="welcome">
    <form id="login" class="center" action="./php/auth.php" method="post">
        <div>Please login.</div>
        <input id="user" class="field" type="text" name="user" value="User" /></br>
        <input id="pass" class="field" type="password" name="pass" value="Pass" /></br>
        <input class="button" type="submit" name="submit" value="Anmelden" />
    </form>
    <div id="login_error" class="error_message center">
        error message
    </div>
</div>

overview.php：

<div id="overview" style="background: red">
    <?php
        if(!isset($_SESSION['user']))
            echo '<div class="error_message">error message</div>';
        else
            echo 'Why is this line only displayed after page refresh (F5)?';
    ?>
    Test, this is being displayed when overview.php is loaded via ajax
</div>

index.js：

$(document).ready(function() {
    //$('#frame').load('./php/welcome.php');
    $("#login").submit(function(e) {
        e.preventDefault();
        $('#login_error:visible').hide();
        $.ajax({
            url: './php/auth.php',
            data: $(this).serialize(),
            type: 'POST',
            dataType: 'json',
            success: function(result) {
                        if(result.success == '1') {
                            $('#welcome').fadeOut(600);
                            $('#frame').load('./php/overview.php');
                        } else {
                            $('#login_error').fadeIn(600).delay(3500).fadeOut(600);
                        }   
                    }
        }); 
    });
    $("#logout").click(function() {
        $.ajax({
            url: './php/logout.php',
            dataType: 'json',
            success: function(result) {
                        if(result.logout == '1') {
                            $('.info, #overview').fadeOut(600);
                        } else {
                            alert('nope');
                        }
                    }
        });
    });
});

【问题讨论】：

您是否在请求/响应期间查看浏览器的控制台以确保您期望发送/接收的数据来回传输？有没有错误？
我对 ajax 和 web 开发还很陌生，到目前为止我只需要处理几次。我将如何测试数据是否来回发送？至少没有可见的错误，设置了 $_SESSION 变量。页面已加载，只有 overview.php 中的 PHP 命令不会被处理，除非我按 F5。
打开浏览器的控制台窗口，然后发出请求。你会看到很多信息。如果有任何问题，您会在那里看到。
auth.php 如您所愿返回 JSON？ overview.php 里面有 session_start() 吗？
任何时候您需要在页面中使用会话信息，您必须在页面顶部包含 session_start()。我不止一次被这个咬过 :) 请记住，PHP 在加载之前是在服务器端处理的，所以当前 session_start() 对以后可能加载的那些 PHP 文件没有影响。

标签： php jquery html ajax login

【解决方案1】：

问题是 overview.php 中缺少 session_start() 调用。将调用添加到该文件的顶部解决了这个问题。

Jay Blanchard 提供的解决方案，更多信息请阅读 cmets。

【讨论】：