如何防止在 PHP 表单提交后重新加载页面？

Question

我有这个基本的 PHP 表单，我想在按下提交按钮后阻止页面刷新。 或者更像是，我想在发送表单后创建一个确认段落。

我非常接近，但我认为该段落没有显示，因为页面正在刷新。

if($_POST["submit"]) {
$recipient="contact@d.com";
$subject="Form to email message";
$sender=$_POST["sender"];
$senderEmail=$_POST["senderEmail"];
$message=$_POST["message"];

$mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";

mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");

$thankYou="<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
}

 <form id="myForm" name="myemailform" method="post" action="index.php"> <div class="inline"> <label>Name</label> <input id="firstName" required placeholder="eg: Emma" type="text" size="32" name="sender" value=""> </div> <div class="inline"> <label>Email</label> <input autocomplete="off" required id="email" type="email" placeholder="eg: EmmaSmith@example.com" name="senderEmail"> </div> <div class="inline"> <label>How can I help?</label> <textarea id="textarea" required placeholder="Type a message here..." name="message"></textarea> </div> <input type="submit" name="submit" value="Submit"> <?=$thankYou?> </form>

注意：我已经尝试了 preventDefault function 和 Ajax 并且它们没有工作。

谢谢！

Answer 1

它们是解决该问题的不同方式和方法。

我是怎么做的：我有一个处理 php 将接收帖子并发送 email 然后我将用户重定向到感谢页面。

header("location: thanks.php);
exit();

您也可以使用 ajax，并在按下按钮后禁用该按钮。 这取决于开发人员、框架和编程偏好。

Answer 2

您首先需要将一些数据从 PHP 发送回您的 AJAX。

session_start();
if(isset($_POST["submit"])) {
  $recipient="contact@d.com";
  $subject="Form to email message";
  $sender=$_POST["sender"];
  $senderEmail=$_POST["senderEmail"];
  $message=$_POST["message"];

  $mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";

  mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");

  $thankYou="<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
    
  echo $thankYou;
}

现在您的 PHP 会将 HTML 发送回 AJAX 调用。

 $(function() { $("#myForm").submit(function(e) { e.preventDefault(); $.post($(this).attr("action"), $(this).serialize(), function(result) { $(this).append(result); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myForm" name="myemailform" method="post" action="index.php"> <div class="inline"> <label>Name</label> <input id="firstName" required placeholder="eg: Emma" type="text" size="32" name="sender" value=""> </div> <div class="inline"> <label>Email</label> <input autocomplete="off" required id="email" type="email" placeholder="eg: EmmaSmith@example.com" name="senderEmail"> </div> <div class="inline"> <label>How can I help?</label> <textarea id="textarea" required placeholder="Type a message here..." name="message"></textarea> </div> <input type="submit" name="submit" value="Submit"> </form>

在此 JavaScript 中，您会注意到，我使用事件 object 进行提交回调。 这使我可以正确使用.preventDefault() 。

尝试将消息放入您的 Session 很好，但它需要加载另一个页面才能调用 session。 PHP 仅在 web 服务器将 HTML 发送到 ZC6E190B284633C38E39E5504Z 浏览器之前执行。 With AJAX, the Post request is being performed "in the background", so data can be sent back in HTML, Text, JSON, or XML without the need to reload or redirect. 然后 JavaScript 可以在同一页面上使用该数据，没有“闪烁”。

在这种情况下，我们将 append 和 HTML 发送到表单，因此一旦通过 PHP mail()发送消息，用户将看到感谢消息。

更新

考虑以下 PHP 替代代码。

<?php
if(isset($_POST["submit"])) {
  $recipient = "contact@d.com";
  $subject = "Form to email message";
  $sender = $_POST["sender"];
  $senderEmail = $_POST["senderEmail"];
  $message = wordwrap($_POST["message"], 70, "\r\n");
  $headers = "From: $sender <$senderEmail>\r\n";
  $headers .= "Reply-To: $senderEmail\r\n";
  $headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
  $headers .= "X-Originating-IP: " . $_SERVER['REMOTE_ADDR']

  $mailBody="Name: $sender\r\nEmail: $senderEmail\r\n\r\n$message";

  var $res = mail($recipient, $subject, $mailBody, $headers);

  if($res){
    echo "<div class='thanksDiv'><p>Thank you! Your message has been sent. I'll get back to you ASAP. <i class='as fa-smile-beam'></i></p><a style='cursor:pointer' class='thanksExit'><i class='fas fa-times fa-2x'></i></a></div>";
  } else {
    echo "<div class='mailError'><p>Sorry, there was an error sending your message. Please check the details and try submitting it again.</p></div>";
  }
}

Answer 3

一些解决方案：

如果用户不需要停留在同一页面上，那么正如Vidal 发布的那样，重定向到成功/感谢页面。

如果用户需要停留在同一页面上，那么您有几个选择：

方法一：

1. 如果没有发布任何内容（即初始页面加载），则使用表单标识符（任何内容）设置 session。 例如if(.isset($_POST['field'])){ $_SESSION['....
2. 提交表单时，检查 session 是否存在与表单标识符并处理，然后销毁 session。
3. 现在如果刷新，session 将不存在，您可以通知用户它已经提交

问题在于，如果 session 已超时并且刷新完成，它将 go 通过。

方法B：

禁用刷新： https://stackoverflow.com/a/7997282/1384889

方法 C：

检查数据库是否重复输入

方法D：（我不喜欢这个但是用的很多）

通过 php header() 或 javascript 将'&t='.time()附加到 URL 重新加载同一页面，具体取决于执行脚本的位置。