Question

我仅在用户单击按钮时才尝试刷新侧边栏类“登录”，但是，当用户单击该按钮时，我无法访问login.php。当我单击它时，它什么也没做，也刷新了整个页面。

据我所知，仅需使用AJAX来刷新DIV，并且不会触发console.log。我在这里做错了什么？

<body>
<div id="main-container">
    <div class="sidebar" id="sidebar">
        <div class="login">

            <?php
            session_start();
            if ( !( isset( $_SESSION['user']) && $_SESSION['user'] != '')) {
                echo '<p>User is logged out</p>';
                echo '<form action="" method="post">';
                echo '<label for="username">Username</label>';
                echo '<input type="text" name="username" id="username_input" required/>';
                echo '<label for="password">Password</label>';
                echo '<input type="text" name="password" id="password_input" required/>';
                echo '<input type="submit" value="Login"  id="login_button">';
                echo '</form>';
                ?>
                <script language='javascript'>
                    $(".login").load( function(event) {
                        event.preventDefault();
                        $("#login_button").click("login.php", function() {
                            console.log("login_button clicked");
                        });
                    })
                </script>
            <?php
            }
            else {
            echo '<p>User is logged in</p>';
            echo '<form action="" method="post">';
            echo '<input type="submit" value="Logout" id="logout_button">';
            echo '</form>';
            ?>
                <script language='javascript'>
                    $(".login").load( function(event) {
                        event.preventDefault();
                        $("#logout_button").click("logout.php", function() {
                            console.log("logout_button clicked");
                        });
                    })
                </script>
            <?php
            }
            ?>

        </div>
        <div class="sideMakers" id="sideMakers">
            <p>Markers</p>
        </div>
    </div>
    <div id="map"></div>
</div>
<script src="map.js"></script>
</body>

预先感谢

Answer 1

由于表单标签上的action=""，您的页面正在刷新。

如果您使用AJAX，也不需要在表单标签上使用method="POST"。只需将其删除！
您可以在场景中有效使用ajax请求。

建议：您可以将js代码与PHP代码分开。

因此您的代码应如下所示-

<body>
<div id="main-container">
    <div class="sidebar" id="sidebar">
        <div class="login">
            <?php
                session_start();
                if ( !( isset( $_SESSION['user']) && $_SESSION['user'] != '')) {
                    echo '<p>User is logged out</p>';
                    echo '<form id="loginForm">';
                    echo '<label for="username">Username</label>';
                    echo '<input type="text" name="username" id="username_input" required/>';
                    echo '<label for="password">Password</label>';
                    echo '<input type="text" name="password" id="password_input" required/>';
                    echo '<input type="submit" value="Login"  id="login_button">';
                    echo '</form>';
                } else {
                    echo '<p>User is logged in</p>';
                    echo '<form>';
                    echo '<input type="submit" value="Logout" id="logout_button">';
                    echo '</form>';
                }
            ?>
        </div>
        <div class="sideMakers" id="sideMakers">
            <p>Markers</p>
        </div>
    </div>
    <div id="map"></div>
</div>
<script src="map.js"></script>
<script type="text/javascript">
    $("#login_button").click(function () {
        var data = $("#loginForm").serialize();
        $.ajax({
            type: "POST",
            url: 'login.php',
            data: data,
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.error(error);
            }
        });
        console.log("login_button clicked");
    });
    $("#logout_button").click(function () {
        $.ajax({
            type: "POST",
            url: 'logout.php',
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.error(error);
            }
        });
        console.log("logout_button clicked");
    });
</script>
</body>

javascript PHP AJAX刷新DIV的一部分

1 个答案: