[英]AJAX submitting form without refresh, not working properly
當我按“登錄”時,腳本將運行並打印出“填寫所有字段”(很棒),但似乎在屏幕上回顯了它,然后刷新了頁面。
AJAX:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
var username = $("#username").val();
var password = $("#password").val();
var login = $("#login").val();
$(".formMessage").load("inc/accounts.php",{
username: username,
password: password,
login: login
});
});
});
</script>
表格(僅頁面上的表格)
<form method="post" autocomplete="off">
<div class="form-group"><input class="form-control" type="text" id="username" placeholder="Username" autofocus></div>
<div class="form-group"><input class="form-control" type="password" id="password" placeholder="Password"></div>
<div class="form-group"><button class="btn btn-outline-primary btn-block" type="submit" id="login">Login</button></div>
<p class='formMessage'></p>
<a href="#" class="forgot">Forgot your password?</a>
<a href="register" class="forgot">Don't have an account?</a>
</form>
PHP代碼(accounts.php)
if(isset($_POST['login'])){
$username = $_POST['username'];
$password = $_POST['password'];
$date = date("d/m/Y");
$time = date("h:i a");
if(empty($username) || empty($password)){
echo "<span style='color: red;'>Fill in all fields!</span>";
}elseif(!DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$username))){
echo "<span style='color: red;'>Incorrect password/username!</span>";
}elseif(!password_verify($password, DB::query('SELECT password FROM users WHERE username=:username', array(':username'=>$username))[0]['password'])){
echo "<span style='color: red;'>Incorrect password/username!</span>";
}else{
$uid = DB::query('SELECT id FROM users WHERE username=:username', array(':username'=>$username))[0]['id'];
$cstrong = True;
$token = bin2hex(openssl_random_pseudo_bytes(64, $cstrong));
DB::query('INSERT INTO logintokens VALUES(\'\', :token, :uid)', array(':token'=>sha1($token), ':uid'=>$uid));
setcookie("uid", $token, time() + 60 * 60 * 24 * 5, '/', '.link.com');
setcookie("uid_", '1', time() + 60 * 60 * 24 * 3, '/', '.link.com');
echo "<span style='color: green;'>Successfully logged in!</span>";
echo '<script>window.location.href = "home";</script>';
}
}
顯示發生了什么的視頻: https : //gyazo.com/8233450b6493bfe415105ea5dbb61b28
您錯過了event.preventDefault()
,它阻止了元素的默認操作發生。 您的最終代碼應如下所示
$(document).ready(function(){
$("form").submit(function(event){
var username = $("#username").val();
var password = $("#password").val();
var login = $("#login").val();
$(".formMessage").load("inc/accounts.php",{
username: username,
password: password,
login: login
});
event.preventDefault();
});
});
欲了解更多信息,請訪問這里
幾個建議
$('#formid')
引用它,以提高可讀性。 這是一個示例,您已經在代碼中傳遞了事件,因此我們只需要阻止其默認操作(提交+刷新)即可。
...
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.