AJAX表格不提交AJAX

Question

我正在使用AJAX和jQuery的登錄表單，但是表單沒有提交正確的方式：它會去process.php而不是在index.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); 

我快拉我的頭髮，請幫我出了什麼錯誤。

Answer 1

您所提交表單的兩倍一個一個點擊提交按鈕，一個在AJAX功能 - 你需要停止默認提交，使得AJAX一個CAN功能：

編輯您的JS，包括以下內容：

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

Answer 2

當您使用表單提交事件這樣就可以防止它通過

return false 

在提交的F年底形成重定向到另一頁結

像....

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

，如果仍不能再工作，你可能需要嘗試這個

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