如何实现邮件发送后无跳转显示Bootstrap提示框？

一、前端（index.php）改法 #

1. 先在页面加个提示容器，默认隐藏，用来展示成功/错误信息
2. 给表单加ID，用JS阻止默认的跳转提交行为，换成AJAX异步发送请求
3. 根据后端返回的结果，显示对应的提示内容

示例代码片段：

<!-- 提示框，默认隐藏 -->
<div id="contact-alert" style="display:none; padding:12px; border-radius:4px; margin:15px 0;"></div>

<!-- 联系表单，可去掉action和method，或者保留但用JS拦截跳转 -->
<form id="contact-form">
  <input type="text" name="username" placeholder="Votre nom" required>
  <input type="email" name="useremail" placeholder="Votre email" required>
  <textarea name="usermsg" placeholder="Votre message" rows="5" required></textarea>
  <button type="submit">Envoyer le message</button>
</form>

<!-- 原生JS处理异步提交 -->
<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  
  // 发送请求到contact.php
  fetch('contact.php', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    const alertBox = document.getElementById('contact-alert');
    if (data.success) {
      // 显示指定的成功提示
      alertBox.textContent = 'E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais';
      alertBox.style.background = '#e8f5e9';
      alertBox.style.color = '#2e7d32';
      // 清空表单内容
      this.reset();
    } else {
      // 显示错误提示
      alertBox.textContent = data.error || 'Erreur lors de l\'envoi, réessayez';
      alertBox.style.background = '#ffebee';
      alertBox.style.color = '#c62828';
    }
    // 显示提示框
    alertBox.style.display = 'block';
    
    // 可选：5秒后自动隐藏提示
    setTimeout(() => {
      alertBox.style.display = 'none';
    }, 5000);
  })
  .catch(err => {
    const alertBox = document.getElementById('contact-alert');
    alertBox.textContent = 'Erreur réseau, vérifiez votre connexion';
    alertBox.style.background = '#ffebee';
    alertBox.style.color = '#c62828';
    alertBox.style.display = 'block';
  });
});
</script>

二、后端（contact.php）改法 #

1. 删除原来的跳转代码（比如header('Location: ...')这类语句）
2. 处理完邮件发送逻辑后，返回JSON格式的结果，不要输出HTML或跳转页面

示例代码片段：

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

// 引入PHPMailer文件，路径根据你的项目实际目录调整
require './PHPMailer/src/Exception.php';
require './PHPMailer/src/PHPMailer.php';
require './PHPMailer/src/SMTP.php';

// 初始化响应数据
$result = ['success' => false, 'error' => ''];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 获取表单提交的数据
  $name = trim($_POST['username'] ?? '');
  $email = trim($_POST['useremail'] ?? '');
  $msg = trim($_POST['usermsg'] ?? '');
  
  // 简单验证表单数据
  if (empty($name) || empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL) || empty($msg)) {
    $result['error'] = 'Veuillez remplir tous les champs correctement';
    echo json_encode($result);
    exit;
  }
  
  $mail = new PHPMailer(true);
  
  try {
    // 这里填写你原来的SMTP配置信息
    $mail->isSMTP();
    $mail->Host = 'smtp.example.com';
    $mail->SMTPAuth = true;
    $mail->Username = 'your-email@example.com';
    $mail->Password = 'your-smtp-password';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
    $mail->Port = 465;
    
    // 设置发件人、收件人信息
    $mail->setFrom($email, $name);
    $mail->addAddress('your-receive-email@example.com'); // 你的收件邮箱
    
    $mail->isHTML(true);
    $mail->Subject = 'Nouveau message de contact';
    $mail->Body = "Nom: {$name}<br>Email: {$email}<br>Message: {$msg}";
    
    $mail->send();
    $result['success'] = true;
  } catch (Exception $e) {
    $result['error'] = "Erreur d'envoi: " . $mail->ErrorInfo;
  }
} else {
  $result['error'] = 'Méthode de requête invalide';
}

// 返回JSON格式的响应
header('Content-Type: application/json');
echo json_encode($result);
exit;

注意事项 #

• 确保PHPMailer的引入路径和你的项目目录匹配，避免报错
• 前端表单的name属性要和后端$_POST里的键对应，不然无法正确获取数据
• 可以根据你的网站风格调整提示框的CSS样式，尽量和示例网站的提示样式统一

内容的提问来源于stack exchange，提问作者xajetin