我只想使用ajax和php创建一个简单的登录页面。有一个表单,其中包含用户名和密码输入以及复选框(现在它没用)和按钮。
这是我的登录页面:
<?php
if(isset($_SESSION['user_session']))
{
header("Location: home.php");
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="CSS/login.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<div class="main">
<img class="backImage" src="img/typewriter.jpg" />
<div id="login">
<div class="formClass">
<form class="loginForm" method="post"> //login form to validate
<div class="form-group">
<label for="userName">User Name</label>
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
<button type="submit" class="btn btn-primary" id="submitButton">Login</button>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.loginForm').validate({
rules: {
username: {
required: true,
minlength: 5,
maxlength: 18
},
password: {
required: true,
minlength: 5,
maxlength: 14
}
},
submitHandler: submitForm
});
function submitForm(){
var strAjax = $('.loginForm').serialize(); // get the input values
$.ajax({
type: 'POST',
url: 'logAjax.php',
data: strAjax,
cache: false,
success: function(data) {
alert(data);
if(data == true) {
window.location.href = "home.php"; // if response is true, then user can go home page
}
else {
alert("false"); // this is just for control purpose
}
}
});
return false;
}
});
</script>
</body>
</html>
我的php文件:
<?php //this is also too simple. just connect the database, control input values and response
include_once 'dbcon.php';
$username = mysqli_real_escape_string($conn, $_POST["username"]);
$password = mysqli_real_escape_string($conn, $_POST["password"]);
$sql = "SELECT * FROM tbl_user WHERE userName = '$username' AND password = '$password'";
$result = mysqli_query($conn, $sql);
$count = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
if($count == 1){
$_SESSION['user_session'] = $row['userName'];
echo TRUE;
}
else {
echo FALSE;
}
exit;
?>
但是当我运行并尝试破坏验证规则时,它不需要获取类似用户名的错误消息,而是直接发送到没有输入值的php文件。所以我收到$ _POST [“username”]和$ _POST [“password”]的错误消息。此外,当我尝试数据库中存在的真实用户名和密码时,同样的scenerio继续。它无法验证表单只运行ajax部分。怎么能处理这个问题?有什么问题?