防止表单提交时页面刷新会阻止代码执行答案

【问题标题】：Preventing page refresh on form submission stops code from executing防止表单提交时页面刷新会阻止代码执行
【发布时间】：2017-08-19 14:47:23
【问题描述】：

我已经阅读了很多关于防止从表单提交中重新加载页面的解决方案，其中大多数是使用“JQuery 脚本”或preventDefault() 返回 false。

问题是，如果您阻止使用 Javascript 或 JQuery 重新加载页面，代码将不会执行，因此在我的情况下，不会发送电子邮件。那么，我怎么能同时运行呢？

这是我的 HTML 表单。

 <form id="myform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <p><input class="w3-input w3-padding-16" type="text" placeholder="name" required name="name"></p>
  <p><input class="w3-input w3-padding-16" type="email" placeholder="email" required name="email"></p>
  <p><input class="w3-input w3-padding-16" type="text" placeholder="subject" required name="subject"></p>
  <p><input class="w3-input w3-padding-16" type="text" placeholder="comment" required name="comment"></p>
  <p>
    <button class="w3-button w3-light-grey w3-padding-large" type="submit">
      <i class="fa fa-paper-plane"></i> SEND MESSAGE
    </button>

我收集数据和发送电子邮件的 PHP 代码：

<?php
$name = $email = $comment = $subject = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = form($_POST["name"]);
  $email = form($_POST["email"]);
  $subject = form($_POST["subject"]);
  $comment = form($_POST["comment"]);
  $to = "myemail@gmail.com";
  mail($to,$subject,$comment,$email);
}
function form($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

我的 JQuery：

$(document).ready(function() {
    $(document).on('submit', '#myform', function() {
      return false;
     });
});

【问题讨论】：

您正在寻找 Ajax。谷歌一下，教程很多。由于您已经在使用 jQuery，您可以使用它们的包装器。
正确，如果您停止提交表单，它将不会提交。这个想法是，一旦您停止了正常的表单提交，您就可以进行 AJAX 调用，而不是允许表单进行正常的提交。你所做的就是阻止任何事情发生。对 AJAX 做一点研究。 Start hereTHen 一旦你理解了这个概念check out jQuery Ajax
非常感谢！
jquery ajax form submit的可能重复
我去看看。谢谢！

标签： javascript php jquery html forms

【解决方案1】：

我从这里得到这个 http://remotephpdevelopers.com/blog/prevent-form-submission/

似乎是您正在寻找的东西。你只需要传递事件。希望这会有所帮助

$(“#submitButton”).click(function(event){
event.preventDefault();
//do your thing
});

【讨论】：

【解决方案2】：

请在不加载页面的情况下使用 $.ajax 方法：

 $("#btn").click(function()
 {
 $.ajax({
type : 'POST',
url : 'url',
data : $('#form').serialize() 
 });

});

【讨论】：