我有一个登录表单,每当出现错误(即“电子邮件地址未注册”)时,该表单都会重新加载到新页面。我需要将错误显示在同一页面上,而不需要重新加载到新页面。我按照有关如何使用 Ajax 执行此操作的教程进行操作,但它似乎不起作用,页面仍然会重新加载。 ajax代码为:
$("#login_button").click(function(){
$.post($("#login_form").attr("action"), $("#login_form :input").serializeArray(), function(info){$("#login_errors").html(info);});
clearInput();
});
$("login_form").submit(function(){
return false;
});
function clearInput(){
$("#login_form: input").each(function() {
$(this).val('');
});
}
我的登录表单代码是:
<form id= "login_form" action="login.php" method="post">
<span id="login_errors"></span>
<label>Email Address</label>
<input type="text" name="email" id="email" required="required"/>
<br />
<label>Password</label>
<input type="password" name="password" id="password" required="required"/>
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Keep me signed in</label>
</div>
<div class="action_btns">
<div class="one_half last"><input type="submit" class="btn btn-blue" id="login_button" value="Login"></div>
<div class="one_half last"><a href="#" id="register_form"
class="btn">Sign up</a></div>
</div>
</form>
我将 ajax 脚本链接到:
<script type="text/javascript" src="login_Ajax.js"></script>
最佳答案
您应该防止提交按钮触发默认操作(提交)。
像这样更新你的代码:
$("#login_button").click(function(){
$.post($("#login_form").attr("action"), $("#login_form :input").serializeArray(), function(info){$("#login_errors").html(info);});
clearInput();
// Prevent the default action from occurring.
return false;
});
关于javascript - Ajax 在登录表单中显示错误而不重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36241381/