时间戳

首页 > 解决方案 > 对同一页面的 AJAX 调用，无需页面刷新

javascript - 对同一页面的 AJAX 调用，无需页面刷新

问题描述

我已经遇到这个问题大约一周了，我似乎无法获得 AJAX 调用来与 PHP 进行通信。这是我为这个问题制作的示例代码

<!DOCTYPE html>

<html>

<head>
  <style>
    #showInfo
    {
      height: 100px; width: 400px;

      text-align: center;
      border: 2px solid darkslategray;

      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      margin: auto;

      cursor: pointer;
    }
    #showInfo p
    {
      font-size: 25px;
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#showInfo").click(function() {
        $.ajax({
          type: "POST",
          data: { imageDir: "hello" },
          success: function(data) {
            alert("success");
            console.log(data);
          },
          error: function(data) { alert("error"); }
        });

        return false;
      });
    });
  </script>
</head>

<body>
  <div id="showInfo">
    <p> Show "defaultPfp.jpg" directory </p>
  </div>

  <?php
    if (isset($_POST['imageDir']))
      echo 'worked';
    else
    {
      echo 'didnt work';
    }
  ?>
</body>

</html>

为了澄清起见，我希望此代码能够在单击 #showInfo div 后发送 AJAX 调用。从这里开始，问题就出现了。我认为页面中的 PHP 不会刷新以收集 AJAX 调用的数据。如果这是问题所在，我不知道该怎么做。

除此之外，我尝试在 AJAX 调用之前和之后添加 event.preventDefault() ，并且我尝试添加一些 ob_flush() 调用，但都没有成功。任何帮助是极大的赞赏。

编辑：正在发生的一个问题是 AJAX 调用中的变量数据无法正常运行。console.log(data) 返回整个 HTML 页面，我不知道为什么。

标签： javascriptphpjqueryajax

解决方案

推荐阅读