What's wrong with my AJAX and PHP whern I call it to login?

Question

I have some trouble with my login form using ajax and php, could somebody con solve this?? This is code html: login.html

<div id="id01" class="modal">
        <form class="modal-content animate" action="" method="POST" id="login-form">
            <div class="container">
                <label for="login-email"><b>Username</b></label>
                <input type="text" placeholder="Enter Email" id="login-email" name="login-email" required>  
                <label for="login-password"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" id="login-password" name="login-password" required>
                <label>
                    <input type="checkbox" checked="checked" name="remember"> Remember me
                </label><br>
                <span id="showError"></span>
                <button type="submit" id="btn-login" name="btn-login">Login</button>
            </div>
            <div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancel-btn">Cancel</button>
                <span class="psw">Forgot <a href="#">password?</a></span>
            </div>
        </form>
    </div>
    <script>
       $(document).ready(function(){
           $("#btn-submit").click(function{
                var login-email = $("#login-email").val();
                var login-password = $("#login-password").val();
                var error = $("#showError");

                if(login-email != "" && login-password != ""){
                    $.ajax({
                        url: "checkLogin.php",
                        type: "POST",
                        data: { login-email: login-email, login-password: login-password},
                        success: function(response){
                            var msg = "";
                            if(response == "success"){
                                window.location = 'profile.php'; 
                            } else {
                                msg = "Tên đăng nhập hoặc mật khẩu không chính xác.";
                            }
                            $('#id01').css({"display": "block"});
                            error.html(msg);
                        }
                    });
                } else {
                    error.html("Email đăng nhập hoặc mật khẩu không được bỏ trống.");
                     return false;
                }
            });
        });
    </script>

and this is code php login.php

if(isset($_POST["btn-login"])){
    $email    = trim($_POST["login-email"]);
    $password = trim($_POST["login-password"]);
    $sql_login = "SELECT email, password, permission FROM users where email='$email' and password='$password'";
    $db->query($sql_login);
    $rows = $db->findOne();
    $permission = $rows['permission'];
    if($rows['email'] == $email && $rows['password'] == $password){
        echo "success";
    } else {
        echo "fail";
    }
    exit(); 
}

It seem to be not to load into ajax and php code cause i've try so many time but i didn't know the bugs in here.

Answer 1

乍看起来，您的jQuery正在引用btn-submit但是您的html却将其定义为btn-login 。

Answer 2

1. you call checkLogin.php but the code php is in login.php
2. In the login.php code, you check the btn-login but the post data from client have no btn-login

{ login-email: login-email, login-password: login-password}

so the if block will never work.

if(isset($_POST["btn-login"])){
...

}

you can change like this

if(isset($_POST["login-email"]) && isset($_POST["login-password"])){
...

}