代码显示意外行为
[英]code shows unexpected behaviour
问题描述
hy!
嗨！ I am trying to run a jquery shake and hide effect.我正在尝试运行 jquery 抖动和隐藏效果。 I simple create a login form consist of 2 fields.我简单地创建了一个包含 2 个字段的登录表单。 I put condition that if user will login with wrong username and password, it will shake or bounce toward left, otherwise it displays a home.php page with hide and show effect.我设置的条件是如果用户使用错误的用户名和密码登录，它会向左摇晃或弹跳，否则会显示一个带有隐藏和显示效果的home.php页面。 But whenever i tried to login with true or wrong username and password, it does not bounce.但是每当我尝试使用真实或错误的用户名和密码登录时，它都不会反弹。 It always gives hide and show effect.它总是提供隐藏和显示效果。 Please see my code, why it's behaving like this.请看我的代码，为什么它的行为是这样的。
index.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>
login.php登录.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
<?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>';
?>
2 个解决方案
解决方案1
0 2016-03-22 13:16:11
In your success callback, the data parameter is a string, right?在您的success回调中，数据参数是一个字符串，对吗？ Why are you checking if it is falsy?你为什么要检查它是否为假？ If it contains any whitespace, which it probably does even if the user doesn't log in successfully then it will be equivalent to true, not false.如果它包含任何空格，即使用户没有成功登录，它也可能会这样做，那么它将等效于 true，而不是 false。
解决方案2
0 2016-03-22 13:24:09
You need return from login.php both values = true or false.您需要从 login.php 返回两个值 = true 或 false。 Cause you always get some data in your var.因为你总是在你的 var 中得到一些数据。
login.php登录.php
if(isset($_POST["username"]) && isset($_POST["password"])){
echo 'true'; // you send here $data["username"];
} else {
echo 'false';
}
And in js code on success event you check:在关于成功事件的 js 代码中，您检查：
success:function(data){
if(data=='false'){
// somethings wrong
} else {
// welcome
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.