Ajax表单联系人(jquery) - Ajax form contact (jquery)

Ajax form contact (jquery)

本文关键字：jquery 联系人表单 Ajax | 更新日期: 2023-09-27

我有一个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;
});

我的邮件没有发送，也没有回复，你知道为什么吗?科迪亚

有几个错误

data应该是一个具有键和值对的有效对象，您的不是:

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

和this:

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

如果您创建数据对象，您应该在ajax中使用不带括号的数据对象。

data: data

如果你使用表单，你应该阻止默认的表单提交

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