当我第一次点击提交按钮时,这些代码就工作了。但当我第二次点击该按钮时,即使电子邮件和密码值为真,也不会发生任何事情,用户也无法登录。但如果我第一次写下真正的值,它就可以工作,用户也可以登录。所以我认为这个问题的原因是"return false;"这句话。但如果我去除了虚假的回报;短语,表单帖子和ajax代码变得毫无用处。我必须避免在没有ajax的情况下发帖。jQuery:
<script>
$(document).ready(function(){
$('#submit-btn').click(function(){
var email = $('#email').val();
email = $.trim(email);
var password = $('#password').val();
password = $.trim(password);
if(email == "") {
$('#email').css({
"background-color": "#FF7070"
});
$('#box1').css({
"visibility": "visible"
});
return false;
}else if(password == "") {
$('#password').css({
"background-color": "#FF7070"
});
$('#box2').css({
"visibility": "visible"
});
return false;
}else{
$.ajax({
type: "POST",
url: "ajax.php",
data: $('#loginform').serialize(),
timeout: 5000,
success: function(c) {
if(c == "no") {
$('#box3').css({
"visibility": "visible"
});
return false;
} else if (c == "ok") {
window.location.href = "homepage.php";
}
},
error: function(a, b) {
if (b == "timeout") {
alert("Error: #101");
}
},
statusCode: {
404: function(){
alert("Error: #102")
}
}
});
}
return false;
})
});
</script>
Html:
<form name="loginform" id="loginform" method="post" action="">
<div class="field">
<input type="text" maxlength="40" id="email" name="email" placeholder="E-mail">
</div>
<div class="field">
<input type="password" id="password" name="password" placeholder="Password" autocomplete="off">
</div>
<div class="field">
<input type="submit" id="submit-btn" value="Log in">
</div>
<div class="keep-login">
<label for="remember">
<input type="checkbox" name="remember" id="remember" checked="checked">Remember me
</label>
<span><a href="#">Forgot password?</a></span>
</div>
</form>
PHP:
if(Input::exists()) {
if(Token::check(Input::get('token'))) {
$validate = new Validate();
$validation = $validate->check($_POST, array(
'email' => array('required' => true),
'password' => array('required' => true)
));
if($validation->passed()) {
$user = new User();
$remember = (Input::get('remember') === 'on') ? true : false;
$login = $user->login(Input::get('email'), Input::get('password'), $remember);
if($login) {
echo "ok";
} else {
echo "no";
}
} else {
echo "no";
}
}
}
首先,删除表单元素的方法和操作属性。您可以完全删除表单标记,但如果您想支持非javascript提交,则需要表单标记(然而,最初的问题并没有要求这样做)。您通过jQuery"提交"表单,因此不需要表单标记上的方法和操作。
输入type="password"永远不会自动完成,因此您不需要该属性。
我还添加了一个错误div。这是你的新html:
<div id="error" style="display: none;">Login failed.</div>
<form>
<div class="field">
<input type="text" maxlength="40" id="email" name="email" placeholder="E-mail">
</div>
<div class="field">
<input type="password" id="password" name="password" placeholder="Password">
</div>
<div class="field">
<input type="submit" id="submit-btn" value="Log in">
</div>
<div class="keep-login">
<label for="remember">
<input type="checkbox" name="remember" id="remember" checked="checked">Remember me
</label>
<span><a href="#">Forgot password?</a></span>
</div>
</form>
用$.post语句替换$.ajax语句,并简单地替换您的逻辑。
$.post("ajax.php", { e: email, p: password }, function (data) {
if (data == "ok") window.location.href = "homepage.php";
else $("#error").slideDown().delay(3000).slideUp(); // I added div#error with "Failed to Login" message in the html above
});
如果返回的数据为"ok",则此代码现在将重定向;否则,它将显示div#error(同样,这在上面的html中),延迟3秒,然后隐藏消息。
return false;
在上面代码的每个实例中都是不必要的,因为在每个条件之后,代码都结束了——没有其他代码可以阻止执行(这就是为什么在本文中使用return false;
)。
您可以在分配变量时在同一行执行$.trim,就像我对slideUp、delay和slideDown所做的那样。