堆棧內存溢出
  簡體   English   中英

AJAX登錄表單重新加載頁面

[英]AJAX login form reloading the page

 原文  2013-09-01 23:25:31  6   8    php/ javascript/ jquery/ ajax

問題描述

嘗試使用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');
            }
        }
    });
}

任何幫助是極大的贊賞。

8 個解決方案

解決方案1
 1  2013-09-02 03:37:16

用這個兄... 

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

它應該運行良好......

解決方案2
 0  2013-09-01 23:30:12

嘗試這個： 

<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>

當登錄提交時，它仍會嘗試重新加載頁面，因此您應該刪除提交類型並將登錄功能放在按鈕上

解決方案3
 0  2013-09-01 23:34:52

通過標簽附加事件監聽器不是一個好習慣，使用jQuery它更簡潔。

試着這樣做： 

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

記得刪除這個：

onSubmit="check_login();return false;

解決方案4
 0  2013-12-26 06:54:17

語句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;
}

解決方案5
 0  2013-12-26 07:08:01

正確的方法是：

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(){
//
});

用戶阻止默認值以停止表單提交

您可以使用'serialize'功能來制作POST嬰兒車。

解決方案6
 0  2014-01-09 07:12:30

有很多方法可以做到這一點：在索引中編寫此代碼：

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

在javascript中使用“ eval ”函數而不是“alert”來顯示reasult
這意味着在你的PHP代碼上，當代碼收到真正的輸入並且數據庫中有一個用戶輸入時，PHP代碼回顯javascript命令（下面是你發送ajax請求的PHP代碼）：> 

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

並在您的JavaScript中使用evel（）而不是alert（）

解決方案7
 0  2014-08-02 12:28:43

刪除按鈕類型並在其上使用onclick處理程序，而不是在窗體上。

它還會在意外按下輸入鍵時自動提交的情況下處理。

快樂的編碼!!!

解決方案8
 -1  2013-12-26 06:40:28

嘗試將輸入類型從“提交”更改為常規按鈕，其onclick操作是調用check_login（）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 ajax登錄表單，重新加載到表單而不是頁面上 Ajax 在登錄表單中顯示錯誤而不重新加載頁面 AJAX登錄而無需重新加載頁面 用PhP和AJAX上載表單以停止重新加載頁面 WordPress登錄頁面上的Ajax表單 錯誤的表單驗證后，似乎正在重新登錄登錄頁面 如果不使用php和ajax調用重新加載頁面，則無法提交表單 當表單提交使用ngjquery ajax時頁面正在重新加載 使用Ajax提交不帶重新加載頁面的聯系表 AJAX在不重新加載頁面的情況下以模式形式顯示錯誤
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM