jQuery AJAX PHP 登录表单

Question

I am trying to make a login form for a webapp.

My login form

<form class="col s12" method="post" action="#">
    <div class="row">
        <div class="input-field col s12">
            <input id="username" type="text" name="name" required>
            <label for="username">Username</label>
        </div>
    </div>
        <div class="row">
            <div class="input-field col s12">
                 <input id="password" type="password" name="pas" required>
                 <label for="password">Password</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="error"></div>
        <div class="card-action">
            <button class="btn waves-effect waves-light" id="loginBtn" type="submit" value="Log In">Submit
                <i class="mdi-content-send right"></i>
            </button>
        </div>
    </div>
</form>

Button click script

<script>
    $(document).ready(function() {

        $('#loginBtn').click(function() {

            var username=$("#username").val();
            var password=$("#password").val();
            var dataString = 'username='+username+'&password='+password;
            if($.trim(username).length>0 && $.trim(password).length>0) {

                $.ajax({
                    type: "POST",
                    url: "login.php",
                    data: dataString,
                    cache: false,
                    beforeSend: function(){ $("#loginBtn").val('Connecting...');},
                    success: function(data){
                        if(data) {
                            window.location.href = "application.php";
                        } else {
                            $('#loginCard').shake();    //Shake animation effect.
                            $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
                        }
                    }

                });
            }
            return false;

        });

    });
</script>

login.php

<?php
    include("db.php");
    session_start();
    if(isset($_POST['username']) && isset($_POST['password'])) {

        $username=mysqli_real_escape_string($db,$_POST['username']);
        $password=msqli_real_escape_string($db,$_POST['password']);
        $result=mysqli_query($db,"SELECT uname FROM users WHERE uname='$username' and pass='$password'");
        $count=msqli_num_rows($result);
        $row=mysqli_fetch_array($result,MYSQLI_ASSOC);

        if($count==1) {

            $_SESSION['login_user']=$row['uname'];
            echo $row['uname']

        }

    }
?>

Whenever I click the submit button it redirects to the same page (index.php) by POST method. In the chrome developer tools, the submit data never gets sent to login.php, and I am not able to understand what's causing this issue. Any help would be appreciated.

Answer 1

You have to change

<form class="col s12" method="post" action="#">

to

<form id="loginForm" class="col s12" method="post" action="#">

and instead of:

$('#loginBtn').click(function() {

you should have:

$('#loginForm').submit(function(e){
    e.preventDefault();
    // Rest of the code here
});

or if the above does not work, you can try this one:

$('#loginForm').submit(function(e){
    // call a function for the ajax job
    return false;
});

Answer 2

 <script>
    $(document).ready(function () {
        $("#login").submit(function (e)
        {   

            var firstForm = $("#login").serialize();

            $.ajax({
                url: "login.php",
                type: 'POST',
                data: firstForm,
                mimeType: "multipart/form-data",
                //contentType: false,
                cache: false,
                processData: false,
                success: function (data)
                {                     
                    if ($.trim(data) === '1') {
                       window.location.href = 'display.php';                                 
                    }
                    else {
                        $('#msgbox').html('Invalid Email id or password.');
                        $('#msgbox').addClass("success").css("color", "red").fadeIn();
                        $('#msgbox').addClass("success").css("font-size", "15px");
                    }
                }
            });
            e.preventDefault();
        });

    });
</script>

Answer 3

I am inclined to think that the problem occurs because, by default, the call through ajax is xxxx (which means that the rest of the process continues and does not wait for the server's response). You should use: 'async: false' as an additional parameter in the call to ajax::

$.ajax({
            url: "login.php",
            type: 'POST',
            data: firstForm,
            mimeType: "multipart/form-data",
            //contentType: false,
            async: false,
            cache: false,
            processData: false,
            success: function (data)