Question

我正在尝试使用Ajax和PHPMailer制作联系表。

我已经设法用html格式和php文件发送邮件了；但是，我想使用Ajax防止重新加载页面，并显示一个弹出窗口，告诉用户邮件是否已发送。当我尝试提交表单时，什么也没有发生，当我在JQuery函数中删除事件参数时，页面将永远加载。

我尝试显示弹出窗口而不在我的js文件中包含Ajax的情况下运行良好，因此我假设JQuery库已正确导入，问题是Ajax不会将数据从我的文件发送到我的php文件。

我的HTML表单：

<form id="contact" method="post" action="traitement-formulaire.php">
                <div class="form-group">
                  <div class="form-row">
                    <div class="col">
                      <label for="formGroupExampleInput">Nom</label>
                      <input type="text" name="nom" class="form-control" placeholder="Votre nom" id="nom">
                    </div>
                    <div class="col">
                      <label for="formGroupExampleInput2">Prénom</label>
                      <input type="text" name="prenom" class="form-control" placeholder="Votre prénom" id="prenom">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="formGroupExampleInput2">Adresse mail</label>
                  <input type="text" name="mail" class="form-control" id=" mail formGroupExampleInput2" placeholder="ex.: exemple@gmail.com">
                </div>
                <div class="form-group">
                  <label for="formGroupExampleInput2">Sujet</label>
                  <input type="text" name="sujet" class="form-control" id=" sujet formGroupExampleInput2" placeholder="Objet de votre demande">
                </div>
                <div class="form-group">
                  <label for="formGroupExampleInput2">Votre message</label>
                  <textarea type="text" name="message" class="form-control" id=" message formGroupExampleInput2" placeholder="Détaillez votre demande ici..."></textarea>
                </div>
                <div class="form-group form-actions">
                  <button class="submit-form btn btn-primary btn-block btn-lg" name="submit" type="submit" value="submit">Envoyer</button>
                </div>
              </form>

我的JQuery文件：

$(document).ready(function(){
$('#contact').submit(function(e){
    e.preventDefault();
    $.ajax({
        dataType: 'JSON',
        url: 'traitement-formulaire.php',
        type: 'POST',
        data: $('#contact').serialize(),
        success: function(data) {
            $('.alert-success').css('display', 'block');
            setTimeout(function(){
                $('.alert-success').css('display' , 'none');
                $('#nom').val("");
                $('#prenom').val("");
                $('#mail').val("");
                $('sujet').val("");
                $('#message').val("")
            }, 3000);
        },
        error: function(data) {
            $('.alert-danger').css('display', 'block');
            setTimeout(function(){
                $('.alert-danger').css('display' , 'none');
                $('#nom').val("");
                $('#prenom').val("");
                $('#mail').val("");
                $('#sujet').val("");
                $('#message').val("")
            }, 3000);
        }
    });
});

}）;

我的PHP文件：

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

$nom = trim($_POST['nom']);
$prenom = trim($_POST['prenom']);
$mail = trim($_POST['mail']);
$sujet = trim($_POST['sujet']);
$message = trim($_POST['message']);

// Instantiation and passing `true` enables exceptions
$mail = new PHPMailer(true);

try {
    //Server settings
    $mail->SMTPDebug = 0;                                       // Enable verbose debug output
    $mail->isSMTP();                                            // Set mailer to use SMTP
    $mail->Host       = 'ns0.ovh.net';  // Specify main and backup SMTP servers
    $mail->SMTPAuth   = true;                                   // Enable SMTP authentication
    $mail->Username   = 'postmaster@sp-neo.com';                     // SMTP username
    $mail->Password   = '*************';                               // SMTP password
    $mail->SMTPSecure = 'ssl';                                  // Enable TLS encryption, `ssl` also accepted
    $mail->Port       = 465;                                    // TCP port to connect to

    //Recipients
    $mail->setFrom($mail, $nom);
    $mail->addAddress('contact@sp-neo.com');     // Add a recipient
    //$mail->addAddress('ellen@example.com');               // Name is optional
    //$mail->addReplyTo('info@example.com', 'Information');
    //$mail->addCC('cc@example.com');
    //$mail->addBCC('bcc@example.com');

    // Attachments
    //$mail->addAttachment('/var/tmp/file.tar.gz');         // Add attachments
    //$mail->addAttachment('/tmp/image.jpg', 'new.jpg');    // Optional name

    // Content
    $mail->isHTML(true);                                  // Set email format to HTML
    $mail->Subject = $sujet;
    $mail->Body    = $message;
    //$mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    $mail->send();
    header( 'Location: index.html' );
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

？>

感谢您的帮助！

编辑：

弹出式窗口的HTML代码：

  <!--Alert-->
  <div class="alert alert-success" role="alert" id="popup-success">
      Votre message a bien été envoyé.
  </div>
  <div class="alert alert-danger" role="alert" id="popup-error">
      Erreur: Votre message n'a pas pu être envoyé.
  </div>
  <!--Alert-->

弹出式窗口的CSS代码：

#popup-success{
display: none;
}
#popup-error{
    display: none;
}

Answer 1

添加答案，以便可能遇到相同问题的人不要看评论。

您的第一个问题是，您在使用苗条jQuery还是在脚本执行后加载jQuery。

然后，PHPMailer文件的路径错误。

最后，您从表单中读取了邮件并将其添加到tomcat/logs/localhost.[YYYY-MM-DD].log变量

$mail

但是随后您在同一变量上初始化PHPMailer对象

$mail = trim($_POST['mail']);

更改

$mail = new PHPMailer(true);

类似于

$mail = trim($_POST['mail']);

并更改此行

$sender = trim($_POST['mail']);

到

$mail->setFrom($mail, $nom);

最后，您拥有$mail->setFrom($sender, $nom);，但是您的脚本没有使用JSON响应

您应将其更改为dataType: 'JSON',，并在dataType: 'text',之后添加echo "mail sent";

也请删除$mail->send();，因为它没有任何作用。

Ajax不会将表单数据发送到我的PHP文件来发送邮件

1 个答案: