dongxian3574 2016-03-03 05:48
浏览 32

登录失败时请勿刷新

I'm creating a website for my assignment, and I want the page to not refresh after I entered the wrong password and username combination.

I'm using both PHP and javascript, and I don't use MYSQL to store the login information

This is my PHP Script

<?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? */
    }
}?>

This is my Javascript code

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

and the form 

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

Basically I want the javascript function of displaying a W3.CSS card alert when the login is not success without having the page reloads itself. If the page reloads itself, the card will dissapear

  • 写回答

1条回答 默认 最新

  • doulian4467 2016-03-03 13:33
    关注

    Since you are not using jQuery, here is the native code: 

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

    And separate your php into different login.php file. Dont use PHP_SELF. It's vulnerable for XSS attacks.

    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));
    }
  }
?>
    评论

报告相同问题？

悬赏问题

  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan