打印表单的输出而没有重新加载页面

Question

我在我的网页上使用 html 、 PHP 和 javascript 编写了这个表单。我想要这个表单接收一个数字作为输入。并将所需的数字添加到 2 。并打印输出。例如，如果我们将数字 5 放在输入端并按下提交按钮，则数字 7 会打印在输出端，而无需重新加载页面。但这不会发生。因为这个命令 "document.getElementById("demo");" 不能正常工作。我怎么了？如何创建一个接收输入数据的表单并在它们上执行所需的命令并在输出中打印结果，而无需重新加载页面？<script type="text/javascript">      $(function () {        $('form').on('submit', function (e) {          e.preventDefault();          $.ajax({            type: 'GET',            url: 'page-index112.php',            data: $('form').serialize(),            success: function () {            document.getElementById("demo");              alert('form was submitted');            }          });        });      });    </script><form name="form" action="" method="GET">    <input type="number" name="sen" placeholder="سن">    <input type="submit" name="submit" value="Submit" placeholder="ثبت"></form><?php     function zzz() {        $sen1 = $_GET['sen'];        if (empty($sen1)){ ?>            <p id="demo"> <?php echo "ooopppss"; ?> </p>        <?php }        else {  ?>            <p id="demo"> <?php echo $sen1 + 2; ?> </p>         <?php }    }

Answer 1

如果您只是想使用纯 JavaScript 解决问题，那将很简单。这样，您就不必使用 PHP 或 AJAX 进行计算。还使用 JQuery 的示例：

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script type="text/javascript">

    $(function () {

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

            e.preventDefault();

            var sen = parseInt($('input[name="sen"]').val());

            $('#demo').html(sen + 2);

        });

    });

</script>

<form name="form" action="" method="GET">

<input type="number" name="sen" placeholder="سن">

<input type="submit" name="submit" value="Submit" placeholder="ثبت">

</form>

<p id="demo"></p>

现在，如果您真的想使用 PHP 进行计算并且想要阻止加载页面，那么您必须使用 AJAX。但是您的代码中存在一些问题。首先，如果你想使用 JQuery，你需要加载它（例如通过从 CDN 加载它）

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

'zzz' 函数不是必需的，并且在那里没有做任何有用的事情。由于您正在向 page-index112.php 发送 AJAX 请求，因此您只需在那里处理数据。

所以 page-index112.php 可以简单地包含如下内容：

<?php

$sen = $_GET['sen'];

echo intval($sen) + 2;

然后你的主脚本可以像这样工作：

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script type="text/javascript">

    $(function () {

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

            e.preventDefault();

            $.ajax({

                type: 'GET',

                url: 'page-index112.php',

                data: $('form').serialize(),

                success: function (result) {

                    var demoElement = document.getElementById("demo");

                    demoElement.innerHTML = result;

                }

            });

        });

    });

</script>

<form name="form" action="" method="GET">

<input type="number" name="sen" placeholder="سن">

<input type="submit" name="submit" value="Submit" placeholder="ثبت">

</form>

<p id="demo"></p>

所以这基本上是相同的结果，但现在您使用 PHP 在后端完成工作，而且无需重新加载页面。

我希望这个解释对你有所帮助！