jQuery ajax表单

Question

I have contact form and I want to use ajax for this form.

files structure:

-contact.html

-email.php

jQuery version - 1.12.4

So I add script for my form (#send_message)

var send_message = $('#send_message');
send_message.on('click', function(e){
    e.preventDefault();
    var error = false;
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();

    if(name.length === 0){
        var error = true;
    }
    if(email.length === 0 || email.indexOf('@') === -1){
        var error = true;

    }
    if(message.length === 0){
        var error = true;
    }

    if(error == false){

        var formData = {
            'name'              : name,
            'email'             : email,
            'message'           : message
        };

        $.ajax({
            type        : 'POST',
            url         : 'email.php',
            data        :  formData,
            success: function(){
                $('#send_message').remove();
                $('#mail_success').fadeIn(500);             }
        })

    }
});

I get users name, email and message. But it seems ajax can't send data to my email.php. I can't see ajax message in console log

Answer 1

Data might be corrupt. Serialze formData to JSON -

data: {
  data: JSON.stringify(formData)
}

At the server end deserialize -

$dataJson=json_decode($_POST["data"]);
$name= $dataJson->{'name'};
$email= $dataJson->{'email'};
$message= $dataJson->{'message'};

return result from php - echo result

To see what has been returned by server, replace success with complete -

complete: function(data) {
// keep break point in body and inspect data.ResponseText
//check http request status
}

</div>