提交表单时如何防止页面重新加载？答案

【问题标题】：How to prevent the page from reloading when the form is submitted?提交表单时如何防止页面重新加载？
【发布时间】：2019-12-17 07:43:34
【问题描述】：

当我提交我的 HTML 表单时，我希望 PHP 获取输入的值，但是每当我提交我的 HTML 表单时，它都会重新加载页面。如何防止这种情况？？提前致谢。

我的代码 -

<!DOCTYPE html>
<html>
<body>
<form method="post">
    <input type="number" type="button" min="0" id="Q1" name="Q1"><br>
    <input type="number" type="button" min="0" id="Q2" name="Q2"><br>
    <input type="number" type="button" min="0" id="Q3" name="Q3">
    <input type="submit" type="button" id="submit2" name="submit2">
</form>
<?php
if(isset($_POST['submit2'])){
    $input1 = $_POST['Q1'];
    $input2 = $_POST['Q2'];
    $input3 = $_POST['Q3'];
    echo $input1;
}
?>

</body>
</html>

【问题讨论】：

为什么在input 中有多个type？
你看过 AJAX 吗？这可以用来调用另一个.php文件，并提交我们表单的数据，而不需要任何页面刷新。
重新加载是什么意思？如果您将表单提交到其他页面，它不会“重新加载”。

标签： php html

【解决方案1】：

你需要ajax

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>

post.php

<?php

print_r($_POST);
if ($_POST['date']) {
  $date = $_POST['date'];
  $time = $_POST['time'];
  echo '<h1>' . $date . '---' . $time . '</h1>';
}
else {

}
?>

【讨论】：

打败了我。我实际上是在输入完全相同的代码。这是正确的答案
@LemuelBotha 将其作为“一个”答案。 philosophy.stackexchange.com/questions/57056/…
我同意，在真正阅读了他的答案之后，我发现他实际上只是从另一个问题的答案中复制了它，而没有进行编辑以适应这个问题
@LemuelBotha 因此原始答案可能已链接到。

【解决方案2】：

您应该尝试使用 AJAX。使用 Ajax，Web 应用程序可以异步地从服务器发送和检索数据，而不会干扰现有页面的显示和行为。

您页面的确切代码如下所示：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(function () {

    $('form').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'post.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });

    });

  });
</script>
</head>
<body>
<form method="post">
    <input type="number" type="button" min="0" id="Q1" name="Q1"><br>
    <input type="number" type="button" min="0" id="Q2" name="Q2"><br>
    <input type="number" type="button" min="0" id="Q3" name="Q3">
    <input type="submit" type="button" id="submit2" name="submit2">
</form>

PHP：post.php

<?php
  if(isset($_POST['submit2'])){
  $input1 = $_POST['Q1'];
  $input2 = $_POST['Q2'];
  $input3 = $_POST['Q3'];
  echo $input1;
  }
?>

</body>
</html>

【讨论】：

如果我的 PHP 代码作为 ajax 代码在文件中，我应该怎么做？？
您只需将 php 创建为外部页面

【解决方案3】：

在 javascript 中，您可以通过 e 执行 e.preventDefault() 是事件

希望对你有帮助

【讨论】：

表单不会被提交。
我想你可以使用 AJAX 在后台通过 javascript 调用 POST 事件
是的，你可以这样做，但这不在你的答案中:)
这不是一个真正的答案，因为它最终不会解决 OP 的问题
您可以将表单中的数据发送到您的php文件中，然后动态更新页面中的元素