Question

我试图获取一个登录页面来运行一个php脚本（使用API向服务器发送curl请求）并返回一个JSON响应，在使用登录脚本之后我不会这样做希望页面刷新。我只想要整个导航栏刷新。

目前它通过AJAX并且不加载php页面，该部分有效。任何指导都将非常感谢。

我使用以下内容： 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

您可以做的是将导航条代码放入单独的PHP文件中，我们将其称为navbar.php。然后，通过执行操作将其包含在您的主页上（我们在导航栏周围添加div，以便稍后更新内容）：

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

最后，在您的ajax代码（login.php）中，如果用户成功登录，则返回ajax响应中navbar.php的内容并替换现有的导航栏。例如，将login.php更改为：

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

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

JS代码：

$.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');
  }
});

根据需要随意更改。

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

1 个答案: