如何防止在 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 重新加載同一頁面，具體取決於執行腳本的位置。