Question

我创建了一个工作正常的登录页面，但我遇到的问题是当我输入无效的用户名，姓名或密码时。

它应显示"invalid username or password"而不加载页面，这就是使用AJAX的权利吗？但是，当我输入无效的用户名或密码时，通过加载在AJAX情况下不可接受的页面，显示用户名或密码无效的错误。

任何人都可以帮我解决这个问题，即在不重新加载页面的情况下应该显示错误消息吗？

的login.php：

<?php 

    session_start(); 
    $mysqli  = mysqli_connect("localhost","root","","ajax1");
    if (isset($_SESSION['id'])){
        header('location:welcome.php');
    }

?>
<!DOCTYPE HTML>  
<html>

<head>
    <title> login script with ajax</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body style="background-color:#b3ffff">

    <div style="padding-left:500px ; padding-top:200px">

        Username:   <input id="username" type="text" name="username" placeholder="username"><br><br>
        Password:   <input id="password" type="password" name="password" placeholder="Password"><br><br>
                    <input id="submit" name="submit" type="button" value="Log In">
                    <p style="color:black">Havent Registered Yet? <a href="index.php">Register</a>.</p><br><br>
                    <div id="display" style="color:red"></div>

        <script>
            $(document).ready(function(){
                $("#submit").click(function(){
                    var username = $("#username").val();
                    var password = $("#password").val();

                    var datastring = 'username=' + username + '&password=' + password;

                    if(username=='' || password==''){
                        $("#display").html("Please Enter All The Fields");
                    }
                    else{
                        $.ajax({
                        type: "POST",
                        url: "success.php",
                        data: datastring,
                        cache: false,
                        success: function(result){
                                $("#display").html(result);
                                window.location = "welcome.php";
                            }
                        });
                    }
                    return false;
                });
            });
        </script>
    </div>

</body>
</html>

success.php：

<?php

    $mysqli  = mysqli_connect("localhost","root","","ajax1");
    session_start();

    if (isset($_SESSION['id'])){
        header('location:welcome.php');
    }

    $myusername = mysqli_real_escape_string($mysqli,$_POST['username']);
    $mypassword = mysqli_real_escape_string($mysqli,$_POST['password']); 

    $sql = "SELECT * FROM users WHERE username = '$myusername'";
    $result = mysqli_query($mysqli,$sql);
    $row = mysqli_fetch_array($result);
    $hashed_password=$row['password'];

    if(password_verify($mypassword, $hashed_password)) {
        $_SESSION['login_user'] = $myusername;
        $_SESSION['id']=$row['userid'];
        echo'Successfully Registered';
    exit();
    }    
    else 
    {
    echo'Invalid username or password';
    }
?>

的welcome.php：

<?php
    session_start();
    if (!isset($_SESSION['id'])) {
        header('location:login.php');
    }
?>

<!DOCTYPE html>
<html>

<head>

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div style="Padding-left:200px; padding-top:100px">
            <?php
                $mysqli  = mysqli_connect("localhost","root","","ajax1");
                $query=mysqli_query($mysqli,"select * from `users` where userid='".$_SESSION['id']."'");
                $row=mysqli_fetch_array($query);
                echo 'Welcome - '.$row['username'];
            ?>

            <br><br>
                <a href="logout.php">Logout</a>
            <br><br>

            <div class="panel panel-primary" style="width:56%">

                <div class="panel-heading text-center">STUDENT'S DETAILS</div>

            </div>  


        <div class="container text-center">

            <?php

                $mysqli  = mysqli_connect("localhost","root","","ajax1");

                if (!isset($_POST["happy"])) {  
                    $result = mysqli_query($mysqli, "SELECT * FROM users");
                } else {
                            $search = mysqli_real_escape_string($mysqli, $_POST["happy"]);
                            $result = mysqli_query($mysqli, "SELECT * FROM users where department like '%$search%'");
                        } if(mysqli_num_rows($result) > 0) {
                    echo "<table border='1' class='text-center' >
                    <tr>

                        <th>USER_ID</th>
                        <th>USERNAME</th>
                        <th>E-MAIL</th>
                        <th>NAME</th>
                        <th>AGE</th>
                        <th>DATE_OF_BIRTH</th>
                        <th>DEPARTMENT</th>

                    </tr>";

                    while($row = mysqli_fetch_array($result))
                    {
                    echo "<tr>";
                        echo "<td>" . $row['userid'] . "</td>";
                        echo "<td>" . $row['username'] . "</td>";
                        echo "<td>" . $row['email'] . "</td>";
                        echo "<td>" . $row['name'] . "</td>";
                        echo "<td>" . $row['age'] . "</td>";
                        echo "<td>" . $row['date_of_birth'] . "</td>";
                        echo "<td>" . $row['department'] . "</td>";

                    echo "</tr>";
                    }
                echo "</table>";
                        }
                        else{
                            echo 'Sorry no record found';
                            }

            ?>

        </div>


        <div class="container form-group">
            <br><br>
            <form method="post">
                <label class="control-label" style="color:blue">Select :</label>

                <select name="happy" style="margin-left:14px; color:black;">
                                <option disabled selected value> -- select an option -- </option>
                                <option value="EE">Electrical & Electronics</option>
                                <option value="EC">Electronics & Communication</option>
                                <option value="ME">Mechanical</option>
                                <option value="CS">Computer Science</option>
                                <option value="CV">Civil</option>
                                <option value="IS">Information Science</option> 
                </select>
                <input type="submit" value="submit">
            </form>
        </div>

    </div>             
</body>
</html>

Answer 1

获取JSON响应如下：

{success: true} or {success: false}

并检查ajax成功

if(result.success == true) {
 window.location = 'welcome.php';
}

代码中的OR

if(result.indexOf('Successfully') > -1) {
 window.location = 'welcome.php';
}

编辑：回购

$.ajax({
 type: "POST",
 url: "success.php",
 data: datastring,
 cache: false,
 success: function(result){
  $("#display").html(result);
  if(result.indexOf('Successfully') > -1) {
   window.location = "welcome.php";
  }
 }
});

显示错误消息

1 个答案: