所以我的网站上有一个图像地图(包含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>
您应该使用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页面变成如下所示。注意,我已经将area元素的类更改为同一类,因为我在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
希望这能有所帮助。