使用 AJAX 根据图像地图点击区域编辑 PHP 查询代码答案

【问题标题】：Edit PHP query code depending on image map clicked area using AJAX使用 AJAX 根据图像地图点击区域编辑 PHP 查询代码
【发布时间】：2016-04-04 18:49:47
【问题描述】：

所以我的网站上有一个图像地图（带有 usemap 和区域），当我单击特定区域时，我希望执行特定的 MySQL 查询。基本上，它是一个表格，当单击图像地图的特定区域时，应在同一页面上显示不同的数据。认为我必须使用 jQuery 或 AJAX（我是这个东西的初学者）。

这是图片地图：

<img id="harta" src="img/hartap.png" alt="testmap" usemap="#Map" />
<map name="Map" id="Map">
    <area class="area1" alt="area1" title="area1" href="#table" shape="poly" coords="898,3071,902,3553,1108,3561,1129,3419,1254,3419,1278,3273,1472,3261,1476,3100" />
    <area class="area2" alt="area2" title="area2" href="#table" shape="poly" coords="842,2759,846,3035,1896,3076,1917,2816,1345,2774" />
    <area class="area3" alt="area3" title="area3" href="#table" shape="poly" coords="942,2327,934,2752,1342,2764,1380,2333" />
</map>

下面是 PHP 代码部分：

<section id="table" class="row">
<?php

    require_once('config.php');

      $reg = "theclickedarea"; // THIS VARIABLE HAS TO BE MODIFIED DEPENDING ON THE CLICKED AREA

      $con = mysql_connect("$host", "$username", "$password") or die(mysql_error());
      $db = mysql_select_db("$db_name") or die(mysql_error());
      $sql=mysql_query("SELECT name, score FROM table WHERE game='".$reg."'") or die(mysql_error());
      $count=0;

    echo  '<table>
                <thead>
                  <tr>
                    <th>name</th>
                    <th>score</th>
                  </tr>
                </thead>
                <tbody>';
    while($row = mysql_fetch_array($sql))
    {
       $name=$row['name'];
       $score=$row['score'];

       echo 
           '<tr>
               <td>'.$name.'</td>
               <td>'.$score.'</td>
           </tr>';

       $count++;   
    }
    echo ' </tbody> </table>  ';

?>
</section>

【问题讨论】：

标签： php jquery html mysql ajax

【解决方案1】：

您应该使用 jQuery 来执行此操作。首先，您应该绑定一个事件侦听器以单击区域元素。然后获取它的值并使用 AJAX 将区域标题作为参数发送到 PHP 脚本发出 GET 请求。 PHP 脚本将查询数据库并构建响应，然后您将其提供给页面。

下面是jQuery添加事件监听并获取区域值并调用PHP脚本。

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.area').bind("click", function () {
                var area = $(this).attr('title');
                var response = getTable(area);

                $('#table-holder').html(response);

            });

                function getTable(area) {
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                var httpURL = "the_php_page.php?area=" + area;
                xhttp.open("GET", httpURL, false);
                xhttp.send();
                return xhttp.responseText;
            }
        });
    </script>

html 页面如下所示。请注意，我已将区域元素的类更改为同一类，因为我在 jQuery 中按类获取它们。

<img id="harta" src="img/No_Image_Available.png" alt="testmap" usemap="#Map" />
<map name="Map" id="Map">
        <area class="area" alt="area1" title="area1" href="#table" shape="poly" coords="898,3071,902,3553,1108,3561,1129,3419,1254,3419,1278,3273,1472,3261,1476,3100" />
        <area class="area" alt="area2" title="area2" href="#table" shape="poly" coords="842,2759,846,3035,1896,3076,1917,2816,1345,2774" />
        <area class="area" alt="area3" title="area3" href="#table" shape="poly" coords="942,2327,934,2752,1342,2764,1380,2333" />
</map>

<div id="table-holder"></div>

最后，作为一个单独文件的 PHP 变成这样：

<?php
require_once('config.php');

$reg = $_GET['area']; // THIS VARIABLE HAS TO BE MODIFIED DEPENDING ON THE CLICKED AREA

$con = mysql_connect("$host", "$username", "$password") or die(mysql_error());
$db = mysql_select_db("$db_name") or die(mysql_error());
$sql = mysql_query("SELECT name, score FROM table WHERE game='" . $reg . "'") or die(mysql_error());
$count = 0;

$response = '<table>
                <thead>
                  <tr>
                    <th>name</th>
                    <th>score</th>
                  </tr>
                </thead>
                <tbody>';
while ($row = mysql_fetch_array($sql)) {
    $name = $row['name'];
    $score = $row['score'];

    $response .= '<tr>
                        <td>' . $name . '</td>
                        <td>' . $score . '</td>
                     </tr>';

    $count++;
}
$response .= ' </tbody> </table>  ';
header('Content-type: text/plain');
exit($response);
?>

此外，请考虑将我的 mysqsli 用于 SQL 连接，因为已弃用 mysql。 http://php.net/manual/en/book.mysqli.php

希望这会有所帮助。

【讨论】：

谢谢，伙计！我稍后会检查一下，我会尽快回复您。
它有效。永远不会想到的。祝你好运，伙计！
我很乐意提供帮助。 :)