代码显示意外行为
code shows unexpected behaviour
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>';
?>
在success
回调中,数据参数是字符串,对吗?你为什么要检查它是否是假的?如果它包含任何空白,即使用户没有成功登录,它也可能会这样做,那么它将等效于true,而不是false。
您需要从login.php返回两个值均为true或false。因为你总是在你的变种中得到一些数据
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
}
}
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- NodeJS中的Parse Json文件在Node中显示意外结果
- Javascript do/while循环显示意外结果
- 代码显示意外行为
- 跨 ajax 请求到服务器返回的 json 对象显示错误意外令牌:
- 画布显示意外的颜色,并且不会显示反转的图像
- cakephp调试信息意外显示
- winjs:当显示页面时,会自动显示意外的字符串
- 使用Angular.js和UI Router突出显示菜单时出现意外类
- 嵌套循环中出现意外中断;t显示在调试器中
- 无法显示数据.SyntaxError:JSON.parse:JSON数据的第1行第1列出现意外字符
- react本机选项卡导航器npm模块在静态proptype中显示意外的令牌
- 硒IDE-显示意外警报!生成随机电子邮件ID时
- 意外的标记,.asp值显示为未定义
- eval(element.innerHTML)显示意外的语法错误
- indexOf()显示意外值
- 正在比较显示意外结果的日期对象
- 当鼠标离开SVG空间时,在鼠标上方突出显示节点会导致意外行为