登錄失敗時不刷新

我爲我的任務創建了一個網站，並且我在輸入錯誤的密碼和用戶名組合後不刷新頁面。登錄失敗時不刷新

我使用PHP和JavaScript的，我不使用MySQL來存儲登錄信息

這是我的PHP腳本

<?php 
if (isset($_POST['login']) && !empty($_POST['username']) 
&& !empty($_POST['password'])) { 
    if ($_POST['username'] == 'admin' && 
    $_POST['password'] == 'admin') { 
    $_SESSION['username'] = 'admin'; 
    header ('Location: mainPage.php'); 
    }else { 
     /*What should I include here? */ 
    } 
}?>

這是我的Javascript代碼

<script>function pasuser(form) { 
if (form.username.value=="admin") { 
    if (form.password.value=="admin") {    
    } 
    else { 
    document.getElementById("loginFail").innerHTML = '<div class="w3-container w3-section w3-red"> <span onclick="this.parentElement.style.display=\'none\'" class="w3-closebtn">×</span><h3>WRONG PASSWORD</h3><p>You need to enter the correct password.</p></div>'; 
    } 
} 
else{ 
    document.getElementById("loginFail").innerHTML = '<div class="w3-container w3-section w3-red"> <span onclick="this.parentElement.style.display=\'none\'" class="w3-closebtn">×</span><h3>WRONG USERNAME</h3><p>You need to enter the correct username.</p></div>'; 
}</script>

和形式

<html><form class="w3-container w3-card-8 w3-margin-16" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" > 

     <h2 class="w3-text-blue">LOGIN PAGE</h2> 

     <p>  
     <label class="w3-text-blue"><b>Username</b></label> 
     <input class="w3-input" name="username" type="text" placeholder="Enter your username here"></p> 

     <p>  
     <label class="w3-text-blue"><b>Password</b></label> 
     <input class="w3-input" name="password" type="password" placeholder="Enter your password here"></p> 

     <p>  
     <button type='submit' class="w3-btn w3-blue" type="button" name="login" value="LOGIN" onclick="pasuser(form)">LOGIN</button></p> 

     <span id="loginFail"> 

    </form></html>

基本上我想要顯示一個W3.CSS卡警報的JavaScript函數，當登錄不成功時不會重新加載頁面本身。如果頁面重新加載自身，該卡將因爲你不使用jQuery dissapear

來源

2016-03-03 Syahnur Nizam

爲什麼你既JS和PHP驗證密碼？ – Panda

我需要驗證與JS，因爲JS會顯示卡警報...我可以運行JS代碼離子PHP？ –

你不能。相反，你可以做的是獲得你的表單細節，並進行ajax（xhr）調用php頁面獲取響應並根據響應顯示正確的消息。一切都將無縫。你問的問題沒有令人耳目一新。 –

，這裏是原生代碼：

function pasuser(){ 
var request = new Request('login.php',{ 
    method: 'POST', 
    body: new FormData(document.getElementById('form')), //set id='form' to your <form> element 
    mode: 'same-origin', 
    redirect: 'manual', 
    headers: new Headers({ 'Content-type': 'application/x-www-form-urlencoded' }); 
}); 
fetch(request).then(function(response){ 
    if(response.message == "success"){ 
     alert("Login Info correct!"); 
     window.location.href="home.php" // For eg. 
     //Do redirect or whatever. 
    }else if(response.message == "error"){ 
     document.querySelector('#loginFail').innerHTML = "Login Info Incorrect!"; //display error message 
    } 
}) 
}

和獨立你的php到不同的login.php文件。不要使用PHP_SELF。它容易受到XSS攻擊。

login.php

<?php 
    if (isset($_POST['login']) && !empty($_POST['username']) && !empty($_POST['password'])) { 
    if ($_POST['username'] == 'admin' && $_POST['password'] == 'admin') { 
    $_SESSION['username'] = 'admin'; 

    $res = array("message"=>"success"); 
    header("Content-type: application/json"); 
    echo (json_encode($res)); 
    }else { 
     $res = array("message"=>"error"); 
     header("Content-type: application/json"); 
     echo(json_encode($res)); 
    } 
    } 
?>

來源

2016-03-03 13:33:19

登錄失敗時不刷新

回答

相關問題