Ajax 表單聯系人 (jquery)

Question

我有一個 ajax 聯系表單的問題。 我有一個 xmlhttprequest 錯誤，但我不知道為什么。 這是我的代碼：

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

這是我的 js 腳本：

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

我的郵件沒有發送，我也沒有回電，你知道為什么嗎？ 親切

Answer 1

有幾個錯誤。

data應該是具有鍵值對的有效對象，您的不是：

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

和這個 ：

var data = [];

應該是一個對象而不是一個數組：

var data = {};

---

$(this).serialize(); 未分配給任何變量。

---

我想ajax應該這樣寫：

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

如果你創建數據對象，你應該在 ajax 中使用它而不使用括號。

data: data

如果您使用表單，則應防止默認表單提交

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