Validate user login through JS(JavaScript), Ajax and PHP

    <script>       
    function validateLogIn()
    {
    
        var username  = $("#IdOfYourUserFiled").val();
        var password  = $("#IdOfYourPasswordFiled").val();
        $.ajax({                                      
            url: 'login.php',    //checking the login in                     
            data: {username:username,password:password}, //You have to pass user inputs to next page to validate in DB            
            type: "POST",     //Method by which data being transmitted
            dataType: 'json',                  
            success: function(data)          
            {
                if(data.flag === 0){
                    alert("Username or Password is incorrect");
                } else if (data.flag == 1){
                    window.open('index.php', '_self');  
                }
            }
        }); 
    }
    </script>
 
    login.php
 
    <?php
        /*Database Details */
        define('DB_HOST', 'localhost');
        define('DB_NAME', 'practice');
        define('DB_USER','root');
        define('DB_PASSWORD','');
        
        /* Database connectivity */
        $con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error()); 
        $db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
        
        /* Username and Password */
        $username = mysql_real_escape_string($_POST['username']);
        $password = mysql_real_escape_string($_POST['password']);
        
        $query = mysql_query("SELECT * FROM UserName where userName = '$username' AND pass = '$password'") or die(mysql_error()); 
        $row = mysql_fetch_array($query) or die(mysql_error());
        if(!empty($row['userName']) AND !empty($row['pass'])){
            print(json_encode(array('flag'=>1)));
        } else { 
            print(json_encode(array('flag'=>0)));
        }
        exit;
    ?>