Question

HY！我试图运行jquery摇动和隐藏效果。我简单地创建一个由2个字段组成的登录表单。我说条件是如果用户使用错误的用户名和密码登录，它会向左摇晃或反弹，否则会显示一个带隐藏和显示效果的home.php页面。但每当我尝试使用真实或错误的用户名和密码登录时，它都不会反弹。它总是提供隐藏和显示效果。请查看我的代码，为什么它会像这样。

的index.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>

的login.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"];  
      }  
 }  
 ?>

home.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回调中，data参数是一个字符串，对吗？你为什么检查它是否是假的？如果它包含任何空格，即使用户没有成功登录也可能会这样做，那么它将等同于true，而不是false。

Answer 2

您需要从login.php返回值values = true或false。因为你总是在var中获得一些数据。

的login.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 个答案: