使用 hover() 检索数据库数据

Question

我正在考虑制作一个带有悬停的图像地图，显示在同一 loc_id 内发生的总次数。

getOccCount.php

<?php
$query = "SELECT COUNT(occurrence_id) FROM major_occurrence GROUP BY location_id";
$result = mysqli_query($link, $query) or die(mysqli_error($link));
$array = mysql_fetch_row($result);                          //fetch result    
echo json_encode($array);
?>

每当我将鼠标悬停到图像地图上的另一个位置时，悬停应该会改变结果，因为它具有不同的位置 ID。

<style type="text/css">
    #map {
        margin: 0;
        padding: 0;
        width: 950px;
        height: 1211px;
        background: url(images/Campus-Map.jpg);
        background-size: 950px 1211px;
        font-family: arial, helvetica, sans-serif;
        font-size: 8pt;
    }

    #map li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #map li a {
        position: absolute;
        display: block;
        /*
       Specifying a background image
       (a 1px by 1px transparent gif)
       fixes a bug in older versions of
       IE that causeses the block to not
       render at its full dimensions.
    */
        background: url(blank.gif);
        text-decoration: none;
        color: #000;
    }

    #map li a span {
        display: none;
    }

    #map li a:hover span {
        position: relative;
        display: block;
        width: 200px;
        left: 20px;
        top: 20px;
        border: 1px solid #000;
        background: #fff;
        padding: 5px;
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    #map a.rpc {
        top: 1060px;
        left: 585px;
        width: 78px;
        height: 65px;
    }
</style>
<script language="javascript" type="text/javascript">
            $('#map>span').hover(function () {
                $.ajax({
                    url: 'getOccCount.php',
                    data: "",
                    dataType: 'json',
                    method: GET,
                    success: function (data) {
                        var location_id = $(this).attr("location_id");
                        $.get("getOccCount.php", {location_id: location_id}, function (result) {
                            var result = data[0];
                            $('#map>span').html('Total Number of Occurrence: ' + result);
                        }
                    }
                });
            });
        </script>
<body>
    <html>
<ul id="map">
    <li><a class="rpc" href="doRPMap.php?locID=1"><span><b>RPC</b></span></a></li>
<ul> 
</body>
</html>

进行必要的更改后，它仍然不适合我。请就此事给我一些建议。谢谢。

Answer 1

如果您向我们提供更多您的代码，例如实际绘制地图的 html（我只看到一个 link，但网页上实际上没有打印任何带有 id=map 的内容），以及 javascript 本身。但我还是会尽量回答你的问题：

由于您使用 jquery 标签 post 进行此操作，因此我假设您已经加载了这些库。基本上，您要做的是在执行 hover() 函数时执行 $.get 或 $.post AJAX 请求，然后对该请求的结果执行某些操作。

首先，您必须在每个 'map marker' 上提供 loc_id，以便将其提交到将处理您的请求的页面。这是一个示例，其中您将鼠标悬停在上面的图像具有 class="image" 和一个独特的 loc_id="x" 属性：

$('.image').mouseenter(function(){ 
    var loc_id = $(this).attr("loc_id");
    $.get("get_occurence_count.php", {loc_id: loc_id}, function(result) {
        //Handle result here.
    });
});

此代码段的作用是：它将悬停在 .image 上的 loc_id 发送到名为 get_occurence_count.php 的 PHP 页面。这个 PHP 页面必须有一个小脚本来打开数据库连接，并像你在问题中提到的那样获取 COUNT，然后 ECHO 这个数字。在 PHP 页面上回显的这个数字将作为变量 result 返回到 javascript。在上面我声明 "Handle result here" 的部分中使用此 result。

例如：您可以将结果放在悬停 div（或您正在使用的任何内容）中，方法是：$('.hover').html('The count for this location is: ' + 结果);

希望对您有所帮助！

编辑：根据以下建议将 hover() 更改为 mouseenter()。 Edit2：添加了关于如何将结果附加到悬停的部分。

使用 hover() 检索数据库数据

Retrieve database data with hover()

javascript

jquery

html

hover

imagemap

getOccCount.php