代碼顯示意外行為

Question

嗨！ 我正在嘗試運行 jquery 抖動和隱藏效果。 我簡單地創建了一個包含 2 個字段的登錄表單。 我設置的條件是如果用戶使用錯誤的用戶名和密碼登錄，它會向左搖晃或彈跳，否則會顯示一個帶有隱藏和顯示效果的home.php頁面。 但是每當我嘗試使用真實或錯誤的用戶名和密碼登錄時，它都不會反彈。 它總是提供隱藏和顯示效果。 請看我的代碼，為什么它的行為是這樣的。

索引.php

<?php  
 session_start();
 print_r($_SESSION);
 if(isset($_SESSION["username"]))  
 {  
      header("location:home.php");  
 }  
 ?>  
 <html>  
      <head>  
           <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
           <meta charset="utf-8">  
           <title>Webslesson Tutorial</title>  
           <script src="http://code.jquery.com/jquery-2.1.1.js"></script>  
           <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  
           <script src="js/bootstrap.js"></script>  
           <link href="css/bootstrap.css" rel="stylesheet" />  
           <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
           <style>  
           #box  
           {  
                width:100%;  
                max-width:500px;  
                border:1px solid #ccc;  
                border-radius:5px;  
                margin:0 auto;  
                padding:0 20px;  
                box-sizing:border-box;  
                height:270px;  
           }  
           </style>  
      </head>  
      <body>  
           <div class="container">  
                <h2 align="center">How to Use Ajax with PHP for Login with Shake Effect</h2><br /><br />  
                <div id="box">  
                     <br />  
                     <form method="post">  
                          <div class="form-group">  
                               <label>Username</label>  
                               <input type="text" name="username" id="username" class="form-control" />  
                          </div>  
                          <div class="form-group">  
                               <label>Password</label>  
                               <input type="password" name="password" id="password" class="form-control" />  
                          </div>  
                          <div class="form-group">  
                               <input type="button" name="login" id="login" class="btn btn-success" value="Login" />  
                          </div>  
                          <div id="error"></div>  
                     </form>  
                     <br />  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#login').click(function(){  
           var username = $('#username').val();  
           var password = $('#password').val();  
           if($.trim(username).length > 0 && $.trim(password).length > 0)  
           {  
                $.ajax({  
                     url:"login.php",  
                     method:"POST",  
                     data:{username:username, password:password},  
                     cache: false,  
                     beforeSend:function()  
                     {  
                          $('#login').val("connecting...");  
                     },  
                     success:function(data)  
                     {  
                          if(data)  
                          {  
                               $("body").load("home.php").hide().fadeIn(1500);  
                          }  
                          else  
                          {  
                               //shake animation effect.  
                               var options = {  
                                    distance: '40',  
                                    direction:'left',  
                                    times:'3'  
                               }  
                               $("#box").effect("shake", options, 800);  
                               $('#login').val("Login");  
                               $('#error').html("<span class='text-danger'>Invalid username or Password</span>");  
                          }  
                     }  
                });  
           }  
           else  
           {  
                return false;  
           }  
      });  
 });  
 </script>

登錄.php

<?php  
 session_start();  
 include_once './include/db_connection.php';
 if(isset($_POST["username"]) && isset($_POST["password"]))  
 {  
      $username = mysqli_real_escape_string($link, $_POST["username"]);  
      $password = md5(mysqli_real_escape_string($link, $_POST["password"]));  
      $sql = "SELECT * FROM signup WHERE username = '".$username."' AND password = '".$password."'";  
      $result = mysqli_query($link, $sql);  
      $num_row = mysqli_num_rows($result);  
      if($num_row > 0)  
      {  
           $data = mysqli_fetch_array($result);  
           $_SESSION["username"] = $data["username"];  
           echo $data["username"];  
      }  
 }  
 ?>

主頁.php

<?php  
 session_start();  
 if(!isset($_SESSION["username"]))  
 {  
      header("location: index.php");  
 }  
 echo '<h1 align="center">'.$_SESSION["username"].' - Welcome to Home Page</h1>';  
 echo '<p align="center"><a href="logout.php">Logout</a></p>';  
 ?>

Answer 1

在您的success回調中，數據參數是一個字符串，對嗎？ 你為什么要檢查它是否為假？ 如果它包含任何空格，即使用戶沒有成功登錄，它也可能會這樣做，那么它將等效於 true，而不是 false。

Answer 2

您需要從 login.php 返回兩個值 = true 或 false。 因為你總是在你的 var 中得到一些數據。

登錄.php

if(isset($_POST["username"]) && isset($_POST["password"])){
  echo 'true'; // you send here $data["username"];
} else {
  echo 'false';
}

在關於成功事件的 js 代碼中，您檢查：

success:function(data){
  if(data=='false'){
     // somethings wrong
  } else {
     // welcome
  }
}

代碼顯示意外行為

問題描述

2 個解決方案

解決方案1
0 2016-03-22 13:16:11

解決方案2
0 2016-03-22 13:24:09

代碼顯示意外行為

問題描述

2 個解決方案

解決方案1 0 2016-03-22 13:16:11

解決方案2 0 2016-03-22 13:24:09

解決方案1
0 2016-03-22 13:16:11

解決方案2
0 2016-03-22 13:24:09