AJAX登录表单重新加载页面

3
尝试使用AJAX创建登录表单,以便页面无需更改即可登录用户。目前我根据找到的教程创建了以下内容,但是出现了表单重新加载页面而不是调用JavaScript函数的问题。
HTML:
<form class="login-form" onSubmit="check_login();return false;">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button type="submit" class="btn trans login-button">Login</button>
</form>

PHP:

// Retrieve login values from POST variables
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);

// Salt and hash password for database comparison
$password = saltHash($password);

// Check that both fields are not empty
if(!empty($email) || !empty($password)) {

// Query database to check email and password match entry
$database->query('SELECT * FROM users WHERE email = :email AND password = :password');
$database->bind(':email',$email);
$database->bind(':password',$password);
$result = $database->single();

if(!empty($result)) {

    // Check entered details match the database
    if($email == $result['email'] && $password == $result['password']) {
        // If login details are correct, return 1
        echo '1';
    }

}
else {
    // If not returned results, return 2
    echo '2';
}

}
else {
    // If either fields are empty, return 3
    echo '3';
}

JavaScript / jQuery:

// Login function
function check_login() {
    $.ajax({
        type: 'POST',
        url: 'check-login.php',
        data: 'email=' + $('input[value="email"]').val() + '&password=' + $('input[value="password"]').val(),
        success: function(response){
            if(response === '1') {
                alert('Log In Success');
            }
            else if(response === '2') {
                alert('Incorrect Details');
            }
            else if(response === '3') {
                alert('Fill In All Fields');
            }
        }
    });
}

非常感谢您的帮助。


你在 AJAX 之前尝试过使用 alert 吗?只是为了检查它是否工作?类似这样的代码:function check_login(){ alert('hi') } - leonardeveloper
一旦按钮被按下,它会立即触发表单提交。 - stu177
@stu177 试着移除 return false; - return 会停止从那里起的执行。 - Funk Forty Niner
@stu177,“saltHash”是内置函数吗?我以前从未见过。你可能是想说“$password = hash($password);”吧? - Funk Forty Niner
在提交时只尝试使用"return false",即onSubmit="return false;",并在单击按钮时调用check_login()函数。此外,在php(服务器端)中尝试在echo之后使用exit;。如果仍然遇到问题,请告诉我。dineshs@mindfiresolutions.com - Dinesh Sahoo
8个回答

1
使用这个程序...
<form id="F_login" class="login-form">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button id="btn_login" type="submit" class="btn trans login-button">Login</button>
</form>

$("#btn_login").click(function(){
    var parm = $("#F_login").serializeArray();
    $.ajax({
        type: 'POST',
        url: 'check-login.php',
        data: parm,
        success: function (response) {              
            if(response === '1') {
                alert('Log In Success');
            }
            else if(response === '2') {
                alert('Incorrect Details');
            }
            else if(response === '3') {
                alert('Fill In All Fields');
            }

        },
        error: function (error) {
            alert("Login Fail...");
        }
    });
});
            else if(response === '3') {
                alert('Fill In All Fields');
            }
        }
    });
}

它应该能够正常运行...


0
试试这个:
<form class="login-form">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button class="btn trans login-button" onclick="check_login()">Login</button>
</form>

当登录提交时,它仍然会尝试重新加载页面,因此您应该删除提交类型并将登录函数放在按钮上。


页面仍在使用默认的GET头刷新。 - stu177

0

通过标签附加事件监听器不是一个好的做法,使用jQuery更加清晰和简单。

尝试这样做:

$("form.login-form .login-button").click(function(e) {
    e.preventDefault();
    check_login();
});

记得去掉这个:

onSubmit="check_login();return false;


仍在重新加载页面并发送GET头。 - stu177
你把那段代码放在了 $(document).ready(function(){ }) 里面吗? - enriquecastl
也许您在使用Web浏览器时遇到了一些缓存问题。请使用Chrome Web检查器设置断点,检查代码是否正确执行。http://chromedevtools.googlecode.com/svn-history/r421/trunk/tutorials/breapoints/index.html - enriquecastl

0

语句check_login();return false是无效的。你必须在函数内部调用return check_login();return false

HTML

<form onsubmit="return check_login();">
   <!-- input fields here -->
</form>

Javascript

function check_login() {
    // Do your ajax call.
    return false;
}

0

正确的方式是:

HTML 代码:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    // Login function
    $(function() {
        $('.login-button').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'check-login.php',
                data: $('form.login-form').serialize(),
                success: function(response) {
                    if (response === '1') {
                        alert('Log In Success');
                    } else if (response === '2') {
                        alert('Incorrect Details');
                    } else if (response === '3') {
                        alert('Fill In All Fields');
                    }
                }
            });
        });
    })
    </script>
    <title>Ajax Login Form (Demo)</title>
</head>

<body>
    <form class="login-form" name="login-form" method="POST" action="">
        <input type="text" name="email" placeholder="Email" />
        <input type="password" name="password" placeholder="Password" />
        <button type="submit" class="btn trans login-button">Login</button>
    </form>
</body>

</html>

请在其中编写您的ajax代码。
$(document).ready(function(){
//
}); or 

$(function(){
//
});

用户可以使用preventDefault来阻止表单提交。您可以使用“serialize”函数来创建POST参数。

0

有很多方法可以做到这一点: 在您的索引中编写此代码:

<a href="www.yourdomain.com" id="link_reload" style="display:none;">index</a>

使用JavaScript中的"eval"函数而不是"alert"来显示结果
这意味着在您的PHP代码中,当代码接收到正确的输入并且数据库中有像输入一样的用户时,PHP代码会回显JavaScript命令(下面是您发送ajax请求的PHP代码):>

<?php if(response==1){
  echo '$("link_reload").trigger("click");';
} ?>

在你的 JavaScript 中使用 evel() 替代 alert()


0

移除按钮类型并在其上使用onclick处理程序,而不是在表单上。

这也会处理意外按下回车键时自动提交的情况。

编码愉快!!!


你也可以通过Jquery来使用它,但是对于单个操作最好使用onclick。另一方面,如果你有多个单击操作,应该使用Jquery。 - Ayush Ghosh

-1

尝试将输入类型从“提交”更改为常规按钮,其onclick操作是调用check_login()


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接