Ajax登录问题

Ajax Login issue

本文关键字:问题 登录 Ajax      更新时间:2023-09-26

PHP连接器

    // Connect to server and select databse.
mysql_connect($host, $username, $password)or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");
/* escape entered values to prevent sql nastyness */
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
if(!empty($username) && !empty($password)){ 
    /* we query through our database to search for a username that has been entered */
    $query = mysql_query("SELECT * FROM $tbl_name WHERE UserLogin = '$username' AND UserPass='$password'");
    if(mysql_num_rows($query) == 1){
        /* if there is a match with the database, we select the username and password from the database corresponding to the entered username */
        while($row = mysql_fetch_assoc($query)){
            $db_username = $row['username'];
            $db_password = $row['password'];
        }
        /* we compare the entered username and password with the ones we just selected from the database */
        if($username == $db_username && $password == $db_password){
            /* If the entered username and password are correct, return 1 */
            echo '1';
        }
    } else {
        /* If the entered username or password do not match, return 2 */
        echo 'Username or Password are wrong';
    }
} else {
    /* If both fields are empty, return 3 */
    echo 'Username and Password are empty';
}

Javascript

    $(document).ready(function() {
    $('#login_form').submit(function() {
        $.ajax({
            type: "POST",
            url: 'php/check_login_online.php',
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function(data)
            {
                if (data === '1') {
                    window.location.replace('php/search.php');
                }
                else {
                    alert(data);
                }
            }
        });
    });
});

HTML

    <div class="container">
    <div class="form-bg">
        <form id='login_form'>
            <h2>test Login</h2>
            <p><input name="username" placeholder="Username" type="text" id="username"></p>
            <p><input name="password" placeholder="Password" type="password" id="password" ></p>
            <label class='error' id='error' style='display: none; font-size: 12px;'></label>
            <button type="submit" name="Submit" class="submit" value="Login"></button>
        </form>
    </div>

    <!-- <p class="forgot">Forgot your password? <a href="">Click here to reset it.</a></p> -->

</div>
<!-- JS  -->
<script src="js/ajax-login.js"></script>

我减少了额外的代码,但当我点击登录按钮时,url会更改,但会保留在带有用户名和密码的登录页面上,但没有验证。谢谢你的帮助。

在研究这个问题时,我可以提出一些建议:

  1. 使用表单操作调用php并进行验证
  2. 从php本身重定向到下一页

您应该在jQuery提交的末尾添加return false。这将阻止表单的默认操作。

为了使ajax登录正常工作,这是必要的。

更新的JavaScript代码:

$(document).ready(function() {
$('#login_form').submit(function() {
    $.ajax({
        type: "POST",
        url: 'php/check_login_online.php',
        data: {
            username: $("#username").val(),
            password: $("#password").val()
        },
        success: function(data) {
            if (data === '1') {
                window.location.replace('php/search.php');
            } else {
                alert(data);
            }
        }
    });
    return false;
});
});