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; 
});