登录失败时不刷新

我为我的任务创建了一个网站，并且我在输入错误的密码和用户名组合后不刷新页面。登录失败时不刷新

我使用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

登录失败时不刷新

回答

相关问题