Ajaxでログインフォームにエラーが表示されずにページが読み込まれる

Question

ログインフォームがあります。ログインフォームは、「電子メールアドレスが登録されていません」というエラーが発生したときに、いつでも新しいページにリロードされます。新しいページにリロードするのと同じページにエラーを表示する必要があります。私はAjaxでそれを行う方法についてのチュートリアルに続きましたが、動作していないようで、ページはまだリロードされています。 Ajaxのコードは次のとおりです。

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

私のログインフォームのための私のコードは次のとおりです。

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

そして私はAjaxのスクリプトをリンク：デフォルトのアクションは（提出防ぐ必要があります

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

Answer 1

）が送信ボタンによって解消されるのを防ぎます。

そうのようなあなたのコードを更新します。あなたはAJAXを使用することを開始するときにしなければならない最初の事は、div要素またはHTML5の任意のタグにクラスのようなelemntsを通じて情報を表示する方法を正確に知っている

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

を。私はあなたのためにコメントしますので、次のコードを見てください。

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