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');
            }
        }
    });
}

どんな助けでも大歓迎です。

4

8 に答える 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');
            }
        }
    });
}

上手くいくはず…

于 2013-09-02T03:37:16.043 に答える
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>

ログインが送信されると、ページの再読み込みが試行されるため、送信タイプを削除してログイン機能をボタンに配置する必要があります。

于 2013-09-01T23:30:12.977 に答える
0

タグを介してイベント リスナーをアタッチすることはお勧めできません。そのために jQuery を使用すると、クリーンで簡単になります。

これを試してください：

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

これを削除することを忘れないでください:

onSubmit="check_login();return false;

于 2013-09-01T23:34:52.120 に答える
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;
}
于 2013-12-26T06:54:17.067 に答える
0

ボタンの種類を削除し、フォームではなく onclick ハンドラーを使用します。

誤ってエンターキーを押して自動的に送信された場合にも対処します。

ハッピーコーディング!!!

于 2014-08-02T12:28:43.903 に答える
-1

入力タイプを「送信」から、onclick アクションが check_login() を呼び出す通常のボタンに変更してみてください。

于 2013-12-26T06:40:28.930 に答える