简体   繁体   English

PHP会话与JavaScript和AJAX意外输出

[英]PHP Session with JavaScript and AJAX Unexpected Output

Here's my problem. 这是我的问题。 When I clicked login then submit with correct username and password it should go directly to the other page. 当我单击登录名,然后使用正确的用户名和密码提交时,应直接转到另一页。 But what happened is that it stocks on the landing page and if i refresh the page its already in the second page. 但是发生的是它存储在登录页面上,如果我刷新页面,它已经在第二页上了。

Here is the image. 这是图片。 在此处输入图片说明

Here is the code 这是代码

checklogin.php checklogin.php

<?php
ob_start();
session_start();

include_once 'config.php';

try{

    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $db = new PDO('mysql:host=' . $host . ';dbname=' . $database_name . ';charset=utf8', $username, $password);

}catch(Exception $e){

    die('error: ' . $e->getMessage());
}

//define username and password

$username = $_POST['username'];
$password = $_POST['password'];

$username = stripslashes($username);
$password = stripslashes($password);

$stmt = $db->query("SELECT * FROM users WHERE account ='$username' AND password='$password'");


$count = $stmt->rowCount();


if($count == 1){

    $_SESSION['username'] = 'username';
    $_SESSION['password'] = 'password';

}
else{
     echo "<div class=\"alert alert-danger\">Invalid username/password</div>";
}

ob_end_flush();?>

btn-login.js btn-login.js

$(document).ready(function(){

$("#btn-submit").click(function(){

  var username = $("#usr").val();
  var password = $("#pwd").val();

  if((username == "") || (password == "")) {
    $("#message").html("<div class=\"alert alert-info\">Enter a username and a password");
    $('#calling-modal').modal('hide');
  }
  else {
    $.ajax({
      type: "POST",
      url: "checklogin.php",
      data: "username="+username+"&password="+password,
      success: function(html){    
        if(html=='true') {
          $('#calling-modal').modal('hide');
            window.location="main.php";
        }
        else {
          $("#message").html(html);
          $('#calling-modal').modal('hide');
        }
      },
      beforeSend:function()
      {
          $("#message").html("<p class='text-center'><img src='includes/img/loader.gif'></p>")

      }
    });
  }
  return false;
}); });

main.php main.php

<?php

session_start();

if(!isset($_SESSION['username'])){
    header('location: index.php');
}?>


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Got2Go Main Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="includes/css/bootstrap.min.css">
        <link rel="stylesheet" href="includes/css/custom-style.css">
        <script src="includes/js/jquery-1.11.3.min.js"></script>
        <script src="includes/js/bootstrap.min.js"></script>
        <script src="includes/js/bs-login.js"></script>
    </head>

<body>
    <div class="container-fluid" id="container-navbar">
        <nav class="navbar navbar-inverse navbar-fixed-top">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                  </button>
                  <a class="navbar-brand" href="index.php">GOT2GO AIRLINES</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">        
                  <ul class="nav navbar-nav">   
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Booking Reservation</a></li>
                        <li><a href="#">Destinations</a></li>
                        <li><a href="#">Page 1-3</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact us</a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                     <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"> <?php echo " " . $_SESSION['username']; ?> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                        <li><a href="logout.php"><span class="glyphicon glyphicon-off"></span> Logout </a></li>
                        </ul>
                     </li>

                  </ul>
                </div>
              </div>
        </nav>
    </div>
    <div class="container">
    </div>  
</body>

index.php index.php

<?php

  session_start();


  if(isset($_SESSION['username'])){
      header("location: main.php"); 
  }

?>

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Got2Go</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="includes/css/bootstrap.min.css">
      <link rel="stylesheet" href="includes/css/custom-style.css">
      <script src="includes/js/jquery-1.11.3.min.js"></script>
      <script src="includes/js/bootstrap.min.js"></script>
      <script src="includes/js/bs-login.js"></script>

  </head>
  <body>
      <div class="container-fluid" id="container-navbar">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>                        
                </button>
                <a class="navbar-brand" href="#">GOT2GO AIRLINES</a>
              </div>
              <div class="collapse navbar-collapse" id="myNavbar">      
                <ul class="nav navbar-nav">   
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Book a flight</a></li>
                      <li><a href="#">Destinations</a></li>
                      <li><a href="#">Page 1-3</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Gallery</a></li>
                  <li><a href="#">Contact us</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li id = "right-nav" data-toggle="modal" data-target="#calling-register"><a href="#"><span class="glyphicon glyphicon-pencil"></span> Create Account </a></li>
                  <li id = "right-nav" data-toggle="modal" data-target="#calling-modal"><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</li>
              </ul>
              </div>
            </div>
        </nav>
      </div>
      <!--carousel starts-->
      <section class="block">
       <div id="bluescript-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#bluescript-carousel" data-slide-to="0" class="active"></li>
              <li data-target="#bluescript-carousel" data-slide-to="1"></li>

            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active" id="myslide01">
                     <img src="includes/img/large-plane03.jpg">
                </div>

                <div class="item" id ="myslide01">
                    <img src="includes/img/large-plane01.jpg">
                </div>

           </div>

        </div>
      <!--carousel-->
    </section>

    <div class="container-fluid features-container" >
          <div class="container" id="inner-features">
            <div class="row" id="row-features">

              <div class="col-md-3" id="col-features">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
                </p>
              </div>

              <div class="col-md-3" id="col-features">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
                </p>
              </div>

              <div class="col-md-3" id="col-features">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
                </p>
              </div>

              <div class="col-md-3" id="col-features">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
                </p>
              </div>
            </div>
          </div>

          <!-- Modal LOGIN -->
          <div class="modal fade" id="calling-modal" role="dialog">
            <div class="modal-dialog modal-sm">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title" id="lheader-text">Login your account</h4>
                </div>
                <div class="modal-body">
                    <form action="checklogin.php" method="post">
                        <div class="form-group">
                          <div id="message"></div>
                          <input type="text" class="form-control" name="username" id="usr" placeholder="Enter username" required autofocus>
                        </div>
                        <div class="form-group">
                          <input type="password" class="form-control" name="password" id="pwd" placeholder="Enter Password" required autofocus>
                        </div>
                        <div class="form-group">
                          <button type="submit" class="btn btn-success btn-sm" name="isLoggedIn" id="btn-submit">Login</button>
                        </div>
                    </form>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal -->
    </div>

    <footer class="container-fluid" id="footer-outer">
        <div class="container" id="footer-inner">
            <div class="row" id="footer-contents">

                <div class="col-sm-2 visible-md-lg" id="col-features">
                    <h6>Copyright &copy; 2015 </h6>
                </div>

                <div class="col-sm-2">
                    <h6>About us</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
                    </p>
                </div>

                <div class= "col-sm-2">
                    <h6>Like our page</h6>
                    <p>
                       <a href="http://www.facebok.com">Facebook</a>
                       <br>
                       <a href="http://www.twitter.com">Twitter</a>
                       <br>
                       <a href="http://www.instagram.com">Instagram</a>
                    </p>
                </div>

                <div class= "col-sm-6">
                    <h6>Types of Payment</h6>
                    <p>
                       <a href="http://www.paypal.com"><img src="includes/img/paypal.png" width=44 height=30 align="center"></a>
                       <img src="includes/img/mastercard.png" width=44 height=30 align="center">
                       <img src="includes/img/visa.png" width=44 height=30 align="center">
                    </p>
                </div>


            </div>
        </div>
    </footer>

  </body>
</html>

I think you need to modify this below code block and check. 我认为您需要在代码块下面进行修改并检查。 so that your ajax will get response as 'true' and will be going to your true block 这样你的ajax就会得到响应为“ true”,并进入你的true块

 if($count == 1){ $_SESSION['username'] = 'username'; $_SESSION['password'] = 'password'; echo "true";exit; } 

Based on my experience with this type of login, it appears that you are returning data from the server in (html), then you are checking (html) to see if it contains the word true. 根据我对这种类型的登录的经验,似乎您正在(html)中从服务器返回数据,然后您正在检查(html)以查看其中是否包含单词true。 In your PHP code, you have not echoed the word "true". 在您的PHP代码中,您没有回显单词“ true”。 Also, I recommended using the following code on the redirect: 另外,我建议在重定向上使用以下代码:

window.location.href=""; return false;

That seems to have better results in the applications I have written. 在我编写的应用程序中,这似乎有更好的结果。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM