php - 使用 AJAX 调用特定 PHP 函数

Question

更新了页面标题。

这是在 Leaderboard.php 上。你可以看到我当前在 tbody 中进行了 PHP 调用。

  <!-- The Leaderboard Table  -->
    <table id="tblData" class="table table-hover leaderboard-table target">

    <thead>
      <tr>
        <th class="hidden-phone">Rank</th>
        <th>Sales Person</th>
        <th>Total Points</th>
      </tr>
    </thead>
    <tbody id="leaderboardresults">
      <?php $getLeaderboard->getTable($_GET['competitionId']); ?>
    </tbody>
  </table>
  <!-- The Leaderboard Table END  -->

这是在 API/getLeaderboard.php 上。这就是 getTable 函数所在的位置。

 <?php
class getLeaderboard {
  public function getTable($competitionId) {
//I run the SQL query and echo out some PHP
    }

这是在 Leaderboard.php 上。

   function loadLeaderboard() {
       var competitionId = $("body").attr("data-competitionId");
       var url = "api/getLeaderboard.php?competitionId=" + competitionId;

       $.get(url, function(data) {
            //$("#leaderboardresults").html(data);
       });
     }

这也在 Leaderboard.php 上。另一个 AJAX 调用执行 AJAX get(这工作完美)，并且应该在成功时重新加载排行榜。

 $(function() {
      //this works (/James)
    $(".navVisible").click(function() {
        var Competition = $("body").attr("data-competitionId");
        var Activity = $(this).attr("data-activity");
        $.post("registerresults.php", { data: Activity, competitionId: Competition })
        .done(function(data) {
            loadLeaderboard();
        });
    });
    loadLeaderboard();
  });

这是 getLeaderboardTable.php

    <?php 
include "common/common.php";
include "api/getLeaderboard.php";
$competitionId = $_GET['competitionId'];
$getLeaderboard->getTable($competitionId); 
?>

Answer 1

据我了解，您需要以下内容 -

1. 您有一个页面(页面 A)在特定时间调用 ajax 函数，并且应该加载结果。

2. 您有一个 php 函数，可以在传递参数“competitionId”时提供这些结果。

你做错的是你在同一页面中有1和2，没有任何 Controller 。你需要做的是，移动

<?php $getLeaderboard->getTable($_GET['competitionId']); ?>

进入另一个页面，输入“getLeaderboardTables.php”。然后修改你的html页面如下:

<table id="leaderboardresults">
<tbody>
</tbody>
</table>

然后你的ajax函数如下，它将数据插入到由idleaderboardresults标识的数据保存表中:

function loadLeaderboard() {
      var competitionId = $("body").attr("data-competitionId");
      var url = "api/getLeaderboardTables.php?competitionId=" + competitionId;

      $.get(url, function(data) {
        $('#leaderboardresults tr:last').after(data);
      });
    }

.after 确保将新行追加到表的末尾。如果您想替换它们，请先调用 $("#leaderboardresults").empty();。

从技术上讲，您不需要将函数移动到不同的 PHP 页面；您可以按照 DevZero 的建议进行操作，并拥有一个基于 switch case 的 Controller ，以便可以使用相同的页面。

您编辑问题后，我有以下评论 -

1. 您的表 ID 必须是排行榜结果，而不是正文 ID。如果您想将表主体保留为 tblData，请按如下方式编辑 ajax 脚本

   $.get(url, 函数(数据) { $('#tblData tr:last').after(data); });

2. 最重要的是，您既没有使用像 DevZero 建议的 Controller ，也没有将 php 数据获取移动到不同的页面。您需要做的是:

选项 1 - 正如我上面提到的，创建一个名为 getLeaderboardTables.php 的新页面，在那里放置数据库连接，包含类，然后添加此行

<?php $getLeaderboard->getTable($_GET['competitionId']); ?>

因此，当从浏览器调用这个新页面时，应该只输出行，而不输出其他内容。然后调用此 URL 并传递竞赛 ID，如我之前提到的。

选项 2 - 不要创建新页面，但在现有页面中，有一个 Controller ，就像 DevZero 所说，在类包含之后将以下内容添加到 html/php 的最顶部，如下所示:

switch ($_GET['action']) {
 case 'ajax':  
     $getLeaderboard->getTable($_GET['competitionId']); //your specific function
     break;
  default:
 ?>
Current html/php page content will come here in its entireity 
<?php      
}

并将ajax调用修改为:

var url = "api/getLeaderboard.php?action=ajax&competitionId=" + competitionId;

基本思想是，AJAX不能用来直接调用PHP函数。 AJAX 可用于调用 PHP 页面，并向其传递一些参数，后者又调用 PHP 函数或方法来生成一些输出，并将该输出打印回浏览器窗口。 AJAX 要做的就是从 php 页面复制输出，并将其存储在 javascript 变量中以执行您想要的操作。因此，您传递给 ajax 函数的 url 必须仅加载您想要动态更新的内容。这里将 AJAX 想象成一个隐形人，他获取您的 url，打开一个隐形的浏览器窗口，粘贴该链接，等待页面加载，复制页面的输出并将其存储在您的变量中。

您正在做的是，您正在通过 AJAX 加载整个页面，而不仅仅是您想要动态更新的输出。