PHP登录脚本无重定向和更新div

Question

I'm attempting to get a login page to run a php script (that uses an API to send a curl request to a server) and returns a JSON response, after using the login script I don't want the page to refresh. I just want the entire navbar to refresh.

Currently it goes through the AJAX and does not load the php page, that portion works. Any guidance would be much appreciated.

I'm using the following: Bootstrap 3.1.1 PHP 5.4

Bootstrap Nav Form

<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <? if(isset($_SESSION['account'][0])){
        echo $_SESSION['account'][0];
      }
        ?>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
            <li class="divider"></li>
            <?
            if(isset($_SESSION['loggedin'])&&$_SESSION['loggedin']=='true')
            {
                echo "<li><a href='logout.php'>Logout</a></li>";
            }else{
                ?>
                <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
                                <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                                <script type="text/javascript" src="js/ajaxform.js"></script>
                      <form action="login.php" method="post" class="ajaxform">
                                <label value="Email">Email</label>

                                <input id="email" style="margin-bottom: 15px;" type="text" name="email" size="30" value=<? echo $email;?> />
                                <label value="Password">Password</label>
                                <input id="password" style="margin-bottom: 15px;" type="password" name="password" size="30" value=<?php echo $password;?> />
                                <label value="environment">Environment</label>
                                <?
                                echo "<select name='environment' style='margin-bottom: 15px;' />";
                                    if(isset($_SESSION['environment']) && $_SESSION['environment']=="Prod"){
                                        echo "<option>Demo</option>";
                                        echo "<option selected='true'>Prod</option>";
                                    }elseif(isset($_SESSION['environment']) && $_SESSION['environment']=="Demo"){
                                        echo "<option selected='true'>Demo</option>";
                                        echo "<option>Prod</option>";
                                    }else{
                                        echo "<option>Demo</option>";
                                        echo "<option>Prod</option>";
                                    }
                                ?>
                                </select>
                        <li class="divider"></li>
                        <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 15px;" type="submit" name="commit" value="Sign In" />
                                    </form>

                    </div>
                    </li>
                    <?
            }


            ?>
        </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Ajaxform.js

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            data    : $(this).serialize(),
            success : function( data ) {

                      },
            error   : function(){
                         alert('Something wrong');
                      }
        });

        return false;
    });

});

Login.php

<?
  $email = $_POST['email'];
  $password = $_POST['password'];

  //curl request here!!

  $json_response = curl_exec($curl);
  $status = curl_getinfo($curl, CURLINFO_HTTP_CODE);

  if ($status == 200) {
    $_SESSION['account'] = json_decode($json_response);
    $_SESSION['loggedin'] = 'true';
  }else{
    $_SESSION['loggedin'] = 'false';
  }
  curl_close($curl);

Answer 1

What you can do is put the nav bar code into a separate PHP file, lets call it navbar.php . Then, include it on your homepage by doing (we add a div around the navbar so we can update the contents later):

<div id="navbar-holder">
  <?php include 'navbar.php'; ?>
</div>

Finally, in your ajax code ( login.php ), if the user logs in successfully, return the contents of navbar.php in the ajax response and replace the existing navbar. Eg, Change login.php to:

if ($status == 200) {
  $_SESSION['account'] = json_decode($json_response);
  $_SESSION['loggedin'] = 'true';

  include 'navbar.php';
} else {
  $_SESSION['loggedin'] = 'false';
}

And the JS code to:

$.ajax({
  url     : $(this).attr('action'),
  type    : $(this).attr('method'),
  data    : $(this).serialize(),
  success : function( data ) {
    // load new navbar
    $('#navbar-holder').html( data );
  },
  error   : function(){
    alert('Something wrong');
  }
});

Feel free to change as necessary.