AJAX 表单不是 AJAX 提交 - AJAX Form not AJAX submitting

我正在使用 AJAX 和 jQuery 处理登录表单，但是表单没有以正确的方式提交：它将处理.php而不是在 index.php 上返回我一条消息。

索引.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');
        }
    });
});

过程.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);

我

快要把头发了，请帮我找出出了什么问题。

您提交表单两次，一次单击提交按钮，一次在 AJAX 函数上 - 您需要停止默认提交，以便 AJAX 可以运行：

编辑您的 JS 以包含以下内容：

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

由于您正在使用表单提交事件，因此您可以通过以下方式防止它从表单重定向到其他页面

return false

在提交功能结束时

喜欢。。。。

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

如果仍然不起作用，那么您可能需要尝试此操作

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