无需手动刷新页面即可将登录更改为注销

Question

I have some issues with my login progress. It logins but it doesn't change the login button to a logout button without manually refreshing the page.

I have a one page jquery plugin that makes the page compact although it doesn't isolate each script from each section.

Here's my page; http://adam-norbacker.ostersjo.nu/

Username: test Password: password

now here's the plugins and scripts that makes sense about the problem: https://github.com/davist11/jQuery-One-Page-Nav

Login/logout button:

<div id="menu" class="default">
<ul id="nav">
<?php 
session_start();
if(isset($_SESSION['username'])){
    $content_hash_name = $_GET['menu'];
    if($content_hash_name == 'section-8');
    echo "<li><a href='logout.php' class='external'>logout</a></li>";
}else{
    echo "<li><a href='#section-8'>login</a></li>";
        }
    ?>
</ul>
</div>

Login script:

  <?php 
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST' ) {

$username = trim(htmlentities(mysql_real_escape_string($_POST['username'])));
$password = trim(htmlentities(mysql_real_escape_string($_POST['password'])));
if (!empty($username) && !empty($password)) {
    $_SESSION['username'] = $username;
    echo "<br/> welcome ", $username;
     } else {
    echo "Please enter correct username or password";
     }   
} else {
    echo "please Login";
}
?>
<h1>Login</h1>
<form action="" onSubmit="" method="post">
<label>User Name :</label>
<input type="text" name="username" /><br />
<label>Password</label>
<input type="password" name="password" /><br />
<input type="submit" value="Login" name="submit"/>
</form>
</div>

Answer 1

The only way to do it is using Javascript, because the PHP code will already be parsed.

The easiest way is to use jQuery and do an AJAX call to a PHP page. Here's the code:

<script type="text/javascript">
$(document).ready(function(){

    $("#loginBtn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            url: 'login.php',
            type: 'POST',
            data:  {username: username, password: password},
            dataType: 'json',
            success: function(response){
                // Success
                $("#loginBtn").hide();
                $("#logoutBtn").show();
            },
            error: function(response){
                // Error
            }          
        });
        return false;
    });

    $("#logoutBtn").click(function(){
        $("#logoutBtn").hide();
        $("#loginBtn").show();
        return false;
    });

});
</script>

<input type="text" value="" id="username" />
<input type="password" value="" id="password" />
<button id="loginBtn">Login</button>
<button id="logoutBtn" style="display:none;">Logout</button>