AJAXフォームがAJAXを送信していない

Question

AJAXとjQueryを使用してログインフォームを作成していますが、フォームは正しい方法で送信されません。つまり、index.phpにメッセージを返す代わりにprocess.phpに行きます。

index.htmlを

<form id="login" action="process.php" method="POST"> 

    <div id="name-group" class="form-group"> 
     <label for="name">Name</label> 
     <input type="text" class="form-control" name="name" placeholder="JohnDoe"> 
    </div> 

    <div id="email-group" class="form-group"> 
     <label for="email">Email</label> 
     <input type="text" class="form-control" name="email" placeholder="john@doe.doe"> 
    </div> 

    <button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button> 

</form> 

は何も間違った形で見つかりませんでした。少なくとも私はそこに何かエラーを見つけることができませんでした。

index.html;これは、私はほとんど私の髪を引っ張ってるJS AJAXスクリプト

$(document).ready(function() { 

    // process the form 
    $('#login').submit(function(event) { 

     // get the form data 
     // there are many ways to get this data using jQuery (you can use the class or id also) 
     var formData = { 
      'name'    : $('input[name=name]').val(), 
      'email'    : $('input[name=email]').val() 
     }; 

$.ajax({ 
    type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
    url   : 'process.php', // the url where we want to POST 
    data  : formData, // our data object 
    dataType : 'json' // what type of data do we expect back from the server 
}) 
    // using the done promise callback 
    .done(function(data) { 

     // log data to the console so we can see 
     console.log(data); 

     // here we will handle errors and validation messages 
     if (! data.success) { 

      // handle errors for name --------------- 
      if (data.errors.name) { 
       $('#name-group').addClass('has-error'); // add the error class to show red input 
       $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input 
      } 

      // handle errors for email --------------- 
      if (data.errors.email) { 
       $('#email-group').addClass('has-error'); // add the error class to show red input 
       $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input 
      } 

     } else { 

      $('form').append('<div class="alert alert-success">' + data.message + '</div>'); 
      alert('success'); 

     } 

    }); 

}); 

process.php

<?php 
$errors   = array();  // array to hold validation errors 
$data   = array();  // array to pass back data 

    if (empty($_POST['name'])) 
     $errors['name'] = 'Name is required.'; 

    if (empty($_POST['email'])) 
     $errors['email'] = 'Email is required.'; 

    // if there are any errors in our errors array, return a success boolean of false 
    if (! empty($errors)) { 

     // if there are items in our errors array, return those errors 
     $data['success'] = false; 
     $data['errors'] = $errors; 
    } else { 

     // if there are no errors process our form, then return a message 

     // DO ALL YOUR FORM PROCESSING HERE 
     // THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER) 

     // show a message of success and provide a true success variable 
     $data['success'] = true; 
     $data['message'] = 'Success!'; 
    } 

    // return all our data to an AJAX call 
    echo json_encode($data); 

で、間違って何が起こっているか私を助けてください。あなたが二回フォームを提出している1つのAJAX機能のボタンと1を提出クリック

Answer 1

- あなたはAJAX 1缶機能するように、デフォルトの提出を停止する必要があります。

編集は、あなたのJSには、以下を含めます：

$('#login').submit(function(event) { 
    event.preventDefault(); 
//rest of code 

Answer 2

あなたが提出Fの終わりに

return false 

することにより、他のページへのリダイレクトを形成することを防ぐことができるようにフォームがイベントを提出使用していると慰め

$('#login').submit(function(event) { 
    // your code 
    return false; 
} 

、まだ、あなたは私はあなたがすべて正しくインデックス内のJSファイルの含めていると仮定しています。この

$(document).on('submit','#login',function(event){ 
    // your code 
    return false; 
});