Ajax 表单联系人 (jquery)

Question

i have a problem with an ajax contact form. I have an xmlhttprequest error, but i don't know why. Here is my code :

<?php
if(isset($_POST)){
if(!empty($_POST['nom']) && !empty($_POST['email']) && !empty($_POST['date']) && !empty($_POST['message']))
{
    $message = '
            Quelqu\'un vous a contacter pour une prestation : \n:
            Nom du client : '.$nom.'\n
            Email du client : '.$email.'\n
            Date de la préstation : '.$date.'\n
            Message : \n 
            '.$message;
    if(mail('my.email@gmail.com', 'Demande de préstation MonSite', $message))
    {
        $msg = "Votre message à bien été envoyé. Nous vous répondrons dès que possible";
    }
    else
    {
        $msg = "Impossible d'envoyer le message, merci de nous contacter via <em>admin@site.fr</em>";
    }
    echo $msg;
}
}
?>

And this my js script :

var form = $("#contact-form");
form.submit(function(){
    $(this).serialize();
    var data = [];
    data.email = $(this).find('input[name="email"]').val();
    data.nom = $(this).find('input[name="nom"]').val();
    data.date = $(this).find('input[name="date"]').val();
    data.message = $(this).find('textarea[name="message"]').val();
    $.ajax({
            url: 'contact.php',
            type: 'post',
            data: {data},
            success: function (msg) {
                form.append('<div class="form-status">' + msg + '</div>');
            },
                                error:function(jqXHR)
                    {
                        console.log(jqXHR);
                    }
        });
    return false;
});

My mail isn't send, and i've no callback, do you know why ? Cordialy

Answer 1

There are several errors.

The data should be a valid object with key and value pair, yours is not:

data: {data:data}, 
//--key-^^^-^^^^----value

and this :

var data = [];

should be an object instead of an array:

var data = {};

---

$(this).serialize(); is not been assigned to any variable.

---

I guess the ajax should have to be written like this:

var form = $("#contact-form");
form.submit(function(){
    var data = {};
    data.email = $(this).find('input[name="email"]').val();
    data.nom = $(this).find('input[name="nom"]').val();
    data.date = $(this).find('input[name="date"]').val();
    data.message = $(this).find('textarea[name="message"]').val();
    $.ajax({
        url: 'contact.php',
        type: 'post',
        data: data, //because it is an object as you can see above | or just $(this).serialize(),
        success: function (msg) {
            form.append('<div class="form-status">' + msg + '</div>');
        },
        error:function(jqXHR){
              console.log(jqXHR);
        }
    });
    return false;
});

Answer 2

If you create data object you should use it without brackets in ajax.

data: data

And if you use form, you should prevent default form submit

form.submit(function(e){
   e.preventdefault();
     ...
   }