使用AJAX根据图像映射单击区域编辑PHP查询代码_Php_Jquery_Html_Mysql_Ajax

使用AJAX根据图像映射单击区域编辑PHP查询代码

php jquery html mysql ajax

使用AJAX根据图像映射单击区域编辑PHP查询代码,php,jquery,html,mysql,ajax,Php,Jquery,Html,Mysql,Ajax,因此，我在我的网站上有一个图像地图（带有usemap和areas），当我点击某个特定区域时，我希望执行特定的MySQL查询。基本上，它是一个表格，当单击图像地图的特定区域时，它应该在同一页面上显示不同的数据。我想我必须使用jQuery或AJAX（我是这方面的初学者）这是图像地图： <img id="harta" src="img/hartap.png" alt="testmap" usemap="#Map" /> <map name="Map" id="Map">

因此，我在我的网站上有一个图像地图（带有usemap和areas），当我点击某个特定区域时，我希望执行特定的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>


您应该使用jQuery来实现这一点。首先，您应该为单击区域元素绑定一个事件侦听器。然后获取其值，并使用区域标题作为参数，使用AJAX向PHP脚本发出get请求。PHP脚本将查询数据库并构建一个响应，然后将其提供给页面
下面是添加事件侦听器、获取区域值并调用PHP脚本的jQuery
<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>


$（文档）.ready（函数（）{
$（'.area'）.bind（“单击”，函数（）{
var area=$（this.attr（'title'）；
var响应=可获取（面积）；
$（'#table holder'）.html（回复）；
});
可获取函数（区域）{
if（window.XMLHttpRequest）{
xhttp=newXMLHttpRequest（）；
}否则{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
var httpURL=“the_php_page.php？area=“+area；
xhttp.open（“GET”，httpURL，false）；
xhttp.send（）；
返回xhttp.responseText；
}
});


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>



希望这有帮助。
您应该使用jQuery来完成这项工作。首先，您应该为单击区域元素绑定一个事件侦听器。然后获取其值，并使用区域标题作为参数，使用AJAX向PHP脚本发出get请求。PHP脚本将查询数据库并构建一个响应，然后将其提供给页面
下面是添加事件侦听器、获取区域值并调用PHP脚本的jQuery
<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>


$（文档）.ready（函数（）{
$（'.area'）.bind（“单击”，函数（）{
var area=$（this.attr（'title'）；
var响应=可获取（面积）；
$（'#table holder'）.html（回复）；
});
可获取函数（区域）{
if（window.XMLHttpRequest）{
xhttp=newXMLHttpRequest（）；
}否则{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
var httpURL=“the_php_page.php？area=“+area；
xhttp.open（“GET”，httpURL，false）；
xhttp.send（）；
返回xhttp.responseText；
}
});


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>



希望这能有所帮助。
谢谢，伙计！我过一会儿就去看看，我会尽快给你回复的，很有效。我永远也想不到。向你致以最良好的祝愿，伙计！我很乐意帮忙。：）谢谢，伙计！我过一会儿就去看看，我会尽快给你回复的，很有效。我永远也想不到。向你致以最良好的祝愿，伙计！我很乐意帮忙。：）