Ajax zeigt Fehler im Login-Formular an, ohne die Seite erneut zu laden

Question

Ich habe ein Login-Formular, das immer auf eine neue Seite geladen wird, wenn ein Fehler auftritt, zB 'E-Mail-Adresse nicht registriert'. Ich brauche die Fehler, um auf derselben Seite anzuzeigen, ohne auf eine neue Seite neu zu laden. Ich folgte einem Tutorial, wie man es mit Ajax macht, aber es scheint nicht zu funktionieren, die Seite lädt noch neu. Der Ajax-Code ist:

$("#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(''); 
    }); 
} 

Mein Code für mein Login-Formular ist:

<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> 

Und ich den Ajax-Skript verknüpft mit:

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

Answer 1

Sie sollten die Standardaktion verhindern (einreichen) vor dem Abschicken durch den Submit-Button.

Aktualisieren Sie Ihren Code wie folgt:

$("#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

Das erste, was Sie tun müssen, wenn Sie AJAX verwenden starten, ist genau wissen, wie in einem div Informationen über elemnts wie Klassen zeigen, oder jeden Tag von HTML5 . Bitte sehen Sie den nächsten Code, weil ich es für Sie kommentieren werde.

//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>