javascript - 单击 元素以使用涉及多个表的 SQL 查询引发自发布事件。 PHP

Question

我有一个从数据库中提取的表。目标是我希望能够点击任何团队并让一个 self 发布的页面生成一个表格，其中每行包含以前的年度结果(多个表格，逐年)和一行总统计数据。例如:点击 San Jose 并在第一行获得 2014-2015 年的统计数据，在下一行获得 2015-2016 年的统计数据，然后将所有季节相加。不太确定如何实现它。我很想就解决此问题的最佳方法获得一些建议。 Link To My Project
这是我的一些代码，因此您可以看到到目前为止我是如何做的。

$query = "SELECT * FROM standings2015_2016 WHERE confid='2' ORDER BY pts DESC, losses ASC, otl ASC, gf-ga DESC";
        $result = $db->query($query);
        echo "<h3>Western Conference</h3>";
        echo "<table class='table sortable'>";  
        echo "<tr class='TableHeaders'>";
        echo "<td class='hover'>Place</td>";
        echo "<td class='hover'>Team</td>";
        echo "<td class='hover'>Wins</td>";
        echo "<td class='hover'>Losses</td>";
        echo "<td class='hover'>OTL</td>";
        echo "<td class='hover'>Points</td>";
        echo "<td class='hover'>GF</td>";
        echo "<td class='hover'>GA</td>";
        echo "<td class='hover'>+ / -</td>";
        echo "</tr>";   

        $i = 0;
        foreach ($result as $row) {
        $i++;
        $plusMinus = ($row['gf'] - $row['ga']); 
          echo "<tr>";
            echo "<td>";
            echo $i;
            echo "</td><td class='hover2'>";
            echo stripslashes($row['name']); 
            echo "</td><td>";
            echo stripslashes($row['wins']);
            echo "</td><td>";    
            echo stripslashes($row['losses']);  
            echo "</td><td>";    
            echo stripslashes($row['otl']); 
            echo "</td><td>";    
            echo stripslashes($row['pts']);
            echo "</td><td>";
            echo stripslashes($row['gf']);
            echo "</td><td>";
            echo stripslashes($row['ga']);
            echo "</td><td>";
            echo $plusMinus;
            echo "</td>";
         echo "</tr>";
          }
        echo "</table>";

所以echo stripslashes($row['name']);就是我要点击的队名。这可以通过 onclick 事件来提示查询和 self 发布来完成吗？

Answer 1

为了做你想做的，我们可以使用jQuery和 Ajax .

首先是下载jQuery here .

然后为每个具有class 和data-artid 标签的团队名称创建一个链接元素:

echo '<a href="#" class="teamname" data-artid="'.$row["teamid"].'">'.stripslashes($row['name']).'</a>'; 

然后创建脚本:

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript">

  $(document).ready(function(){ /* PREPARE THE SCRIPT */
    $(".teamname").click(function(){ /* WHEN A TEAM IS CLICKED */
      var elem = $(this); /* STORE THE CLICKED TEAM */
      var teamid = elem.attr("data-artid"); /* GET THE ID OF THE CLICKED TEAM NAME */

      $.ajax({ /* PREPARE THE AJAX */
        type: "POST", /* METHOD TO BE USED TO PROCESS THE PASSED DATA */
        url: "action.php", /* THE PAGE WHERE THE DATA WILL BE PROCESSED */
        data: {"teamid": teamid}, /* THE DATA WE WILL PASS */
        success: function(result){
          $("#content").html(result); /* WE WILL SHOW THE RETURNED DATA TO YOUR CONTENT DIV */
        } /* END OF SUCCESS */

      }); /* END OF AJAX */
    });
  });

</script>

对于您的 action.php，它将使用 Ajax 处理传递的数据:

<?php

  /* INCLUDE YOUR DB CONNECTION HERE */

  if(!empty($_POST["teamid"])){

    $tr = '
          <table class="table sortable">
            <tr class="TableHeaders">
              <td class="hover">Team</td>
              <td class="hover">Wins</td>
              <td class="hover">Losses</td>
              <td class="hover">OTL</td>
              <td class="hover">Points</td>
              <td class="hover">GF</td>
              <td class="hover">GA</td>
            </tr>
          ';

    $result = $db->query("SELECT name, wins, losses, otl, pts, gf, ga FROM standings2014_2015 WHERE teamid = '".$_POST["teamid"]."'");
    foreach ($result as $row) {
      $tr .= '
             <tr>
               <td>'.$row["name"].'</td>
               <td>'.$row["wins"].'</td>
               <td>'.$row["losses"].'</td>
               <td>'.$row["otl"].'</td>
               <td>'.$row["pts"].'</td>
               <td>'.$row["gf"].'</td>
               <td>'.$row["ga"].'</td>
             </tr>
             ';
    } /* END OF LOOP */

    $tr .= '</table>';

    echo $tr; /* RETURN THIS TO AJAX */

  } /* END OF NOT EMPTY teamid */

?>