-1
ajaxとphpを使用して簡単なログインページを作成したいだけです。ユーザー名とパスワードの入力とチェックボックス（これは今のところ役に立たない）とボタンがあるフォームがあります。基本ログインはAjaxで検証する
<?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を実行するだけでフォームを検証することはできません。この問題をどのように処理できますか？何が問題ですか？
ログインボタンがjavascript機能を呼び出さずにフォームを送信していると思います。 #submitButtonにonclickをsubmitForm（）に配置してみてください。そしてデフォルトを防ぐことを忘れないでください。 –
私は実際にjavascriptとその実行でアラート機能を試してみます。ただ検証することはできませんが、残念なことに私が知っているのはなぜですか？ – kimdirbilmem