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

问题描述

当我提交我的 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>

标签: phphtml

解决方案


你需要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 {

}
?>

推荐阅读