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

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

为了更具体地说明我的第一个注释，你必须在回显响应后放置一个exit语句，这样代码的其余部分就不会执行，也检查表单是否已发送，你可以在你的内容中添加一个隐藏的输入在PHP中检查值为“1”（ <input name="formSent" type="hidden" value="1"> ）的<input name="formSent" type="hidden" value="1"> ：

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

然后在success的callback参数中获取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 个解决方案

解决方案1
0 已采纳 2019-05-13 17:21:34

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-13 17:21:34

解决方案1
0 已采纳 2019-05-13 17:21:34