Question

Hellow，我一直在尝试提交表单而不在同一页面上重新加载和获取PHP输出。主要目的是将表单值提交到PHP文件，并获取PHP文件发送的输出。为了更好地理解它，让我们看一下以下代码片段： HTML和jQuery代码：

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

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

          e.preventDefault();

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

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input id="name" name="name"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>

PHP代码：

<?php
if (isset($_POST['submit'])){
$name=$_POST['name'];
if($name == 'Johny'){
    echo "Welcome Johny";
}
else{
echo "I Dont Know You";
}
}
?>

我想要什么：

当用户在“输入”框中输入值并提交时，页面应显示输出值，例如ECHO值，而无需重新加载网页。

Answer 1

要在我的第一条评论中更具体，您必须在响应后添加退出语句，以便其余代码不执行，还要检查是否发送了表单，您可以添加隐藏的在表单中输入值“ 1”（<input name="formSent" type="hidden" value="1">），该值将在PHP中进行检查：

<?php
if (isset($_POST['formSent'])){
$name=$_POST['name'];
if($name == 'Johny'){
  echo "Welcome Johny";
  exit;
}
else{
  echo "I Dont Know You";
  exit;
}
}
?>

，然后从成功的回调参数中获取ajax请求的响应，还指定method: 'POST'，因为jQuery的$ .ajax函数默认使用方法 GET ：

<script>
  $(function () {

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

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'on.php',
        method: 'POST',
        data: $('form').serialize(),
        success: function (message) {
          alert(message);
        }
      });

    });

  });
</script>

提交表单而无需重新加载页面并获取输出[PHP，jQuery]

1 个答案: