时间戳

首页 > 解决方案 > PHP表单提交后如何防止页面重新加载？

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

问题描述

我有这个基本的 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="e.g: Emma" type="text" size="32" name="sender" value="">
   </div>
   <div class="inline">
      <label>Email</label>
      <input autocomplete="off" required id="email" type="email" placeholder="e.g: 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 函数和 Ajax，但它们不起作用。

谢谢！

标签： javascriptphphtmljqueryforms

解决方案

您首先需要将一些数据从 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="e.g: Emma" type="text" size="32" name="sender" value="">
  </div>
  <div class="inline">
    <label>Email</label>
    <input autocomplete="off" required id="email" type="email" placeholder="e.g: 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 中，您会注意到，我使用 Event 对象来提交回调。这让我可以.preventDefault()正确使用。

尝试将消息放入您的会话中很好，但它需要加载另一个页面来调用会话。PHP 仅在 Web 服务器将 HTML 发送到 Web 浏览器之前执行。使用 AJAX，Post 请求在“后台”执行，因此数据可以以 HTML、文本、JSON 或 XML 的形式发回，而无需重新加载或重定向。然后，JavaScript 可以在同一页面上处理该数据，而不会“闪烁”。

在这种情况下，我们将 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>";
  }
}

推荐阅读