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可以運行：

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

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

Answer 2

當您使用Form Submit事件時，可以通過以下方式阻止它將表單重定向到其他頁面：

return false 

在提交功能的末尾

喜歡....

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

如果仍然無法使用，那么您可能需要嘗試一下

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