Ajax 在登录表单中显示错误而不重新加载页面

Question

I have a login form which currently reloads to a new page whenever there is an error ie 'email address not registered'. I need the errors to display on the same page wihtout reloading to a new page. I followed a tutorial on how to do it with Ajax, but it doesn't seem to work, the page still reloads. The ajax code is:

    $("#login_button").click(function(){

    $.post($("#login_form").attr("action"), $("#login_form :input").serializeArray(), function(info){$("#login_errors").html(info);});
    clearInput();
});

$("login_form").submit(function(){
    return false;
});

function clearInput(){
    $("#login_form: input").each(function() {
        $(this).val('');
    }); 
}

My code for my login form is:

<form id= "login_form" action="login.php" method="post">
    <span id="login_errors"></span>
    <label>Email Address</label>
    <input type="text" name="email" id="email" required="required"/>
    <br />

    <label>Password</label>
    <input type="password" name="password" id="password" required="required"/>
    <br />

    <div class="checkbox">
    <input id="remember" type="checkbox" />
    <label for="remember">Keep me signed in</label>
    </div>

    <div class="action_btns">
    <div class="one_half last"><input type="submit" class="btn btn-blue" id="login_button" value="Login"></div>
    <div class="one_half last"><a href="#" id="register_form" 

class="btn">Sign up</a></div>
        </div>
</form>

And I linked the ajax script with:

<script type="text/javascript" src="login_Ajax.js"></script>

Answer 1

You should prevent the default action (submit) from being fired by your submit button.

Update your code like so:

   $("#login_button").click(function(){

    $.post($("#login_form").attr("action"), $("#login_form :input").serializeArray(), function(info){$("#login_errors").html(info);});
    clearInput(); 
    // Prevent the default action from occurring.
    return false;
});

Answer 2

The first thing that you have to do when you starting to use AJAX, is know exactly how show information through elemnts like classes into a div or any tag of HTML5. Please see the next code because I will comment it for you.

//This is our DOM on JQUERY or JAVASCRIPT named as main.js
$(function() {
    //First we have to listen on a event click (button) and extract the values of the inputs
    $('body').on('click','.myButtonClass', function() {
        $email    = $('#emailID').val();
        $password = $('#passwordID').val();
        //We save in a object our values
        $x = {
            action:'register',
            email:$email,
            password:$password
        };

        //We execute ajax calling a php file for POST method
        $.post('file.php',$x,function(callback) {
            $('.answer').html(callback);
        });

    });
});

/*END OF DOM AND MAIN.JS*/

//BEGIN OUR PHP FILE WHERE WE'LL RECIEVE ALL THE DATA FROM THE AJAX FILE
<?php

    //we save the action sended trough ajax
    $action = $_POST['action'];
    //we do a switch for determinate what value have the action variable
    switch ( $action ) :
        case 'register': 
            //we save with addslashes for security in the data base
            $email = addslashes($_POST['email']);
            $password = addslashes($_POST['password']);
            //If your objetive is validate if the email and password were send in the form, you can do something like this
            $validate = strlen($email)*strlen($password);
            //This say that if email * password are > 0, the data were send. Otherwise, this operation gonna be equal zero 
            //and thats means that both or one of the data were not recieve in this file trough ajax.
                if ( $validate > 0 ) :
                    echo 'You login!';
                else :
                    echo 'You are not write all the inputs.';
                endif;
        break;
    endswitch;
?>

/*END OF PHP FILE*/

//BEGIN OUR FORM IN HTML

<form>
    <input type="email" id="emailID" placeholder="Write here your email">
    <input type="password" id="passwordID" placeholder="Write here your password">
    <input type="button" class="myButtonClass">
</form>

<!--This will be where we display the answer with ajax, in the element who have the class answer-->
<div class="answer"></div>