ログインスクリプトの機能があります。結果が「成功」に等しくない場合は、ステータスの ID を持つ div でフェードインすることになっています。divは何があってもフェードインし始めます。ログインしてリダイレクトしますが、まだ div がフェードインし始めているのがわかります。
JS: *参考までに、_はdocument.getElementById
*の変数です
function login() {
var u = _("user").value;
var p = _("pass").value;
var status = _("status");
var ajax = ajaxObj("POST", "login_script.php");
ajax.onreadystatechange = function(){
if(ajax.responseText !== "success"){
status.innerHTML = ajax.responseText;
if(_('status').style.display != "block"){
fadeIn('status');
};
}
else{
window.location.href = "index.php";
}
};
ajax.send(
"u=" + u
+ "&p=" + p);
}
HTML:
<form onsubmit="return false;" id="valid" class="mainForm">
<fieldset>
<div class="loginRow">
<label for="req1">Username:</label>
<div class="loginInput"><input type="text" name="user" id="user" /></div>
</div>
<div class="loginRow">
<label for="req2">Password:</label>
<div class="loginInput"><input type="password" name="pass" id="pass" /></div>
</div>
<div id="status" style="width:94%;"></div>
<div class="loginRow">
<div class="submitForm">
<button id="loginbtn" onclick="login();" class="greyishBtn"> Login </button>
</div>
<div id="forgot" style="padding:5px 15px;; float:right;">
<a href="forgot.php">Forgot/Reset Password</a>
</div>
</div>
</fieldset>
</form>
login-script.php
$username = $_POST['u'];
$password = $_POST['p'];
$query = mysqli_query($GLOBALS["___mysqli_ston"], "SELECT username, password, id_user, permissions FROM users WHERE username='$username' and password='$password'");
$count = mysqli_num_rows($query);
$row = mysqli_fetch_assoc($query);
$perm = $row['permissions'];
if($count==1){
$seconds = 3600 + time();
setcookie(loggedin, date("F js - g:i a"), $seconds);
session_start();
$_SESSION['id'] = $row['id_user'];
echo "success";
}
else{
echo '<span style="color:red;">Please check your username and password and try again.</span>';
}
ajaxObj:
function ajaxObj(meth, url) {
var x = new XMLHttpRequest();
x.open(meth, url, true);
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
試してみたい人はhttp://lucienconsulting.com/brick-academy/
ユーザー名: jvincilione3@aol.com パスワード: パスワード
私が話していることがわかります。