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

【问题标题】：Retrieve database data with hover()使用 hover() 检索数据库数据
【发布时间】：2016-01-22 13:42:50
【问题描述】：

我正在考虑制作一个带有悬停的图像地图，显示在同一 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>

进行必要的更改后，它仍然不适合我。请给我一些关于这个问题的建议。谢谢。

【问题讨论】：

在每个悬停的元素上请求服务器肯定不行...
确切地说，我只需要将鼠标光标移动到元素上，然后一次又一次地移出，然后……用 AJAX 请求淹没您的服务器。如果您无法预先获取数据，那么您至少应该实现某种形式的缓存，以便下一次将鼠标悬停在同一元素上时不需要再次发出请求。

标签： javascript jquery html hover imagemap

【解决方案1】：

如果您向我们提供更多代码会很有帮助，例如实际绘制地图的 html（我只看到一个链接，但网页上实际上没有打印任何带有 id=map 的链接），以及 javascript 本身。但无论如何我都会尝试回答你的问题：

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

首先，您必须在每个“地图标记”上提供 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.
    });
});

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

例如：您可以将结果放入悬停 div（或您正在使用的任何内容）中，方法是： $('.hover').html('该位置的计数是：' + result);

希望这会有所帮助！

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

【讨论】：

this will call an ajax request on mouseenter/mouseleave (both events) each time. And these events can happen hundred times. This is answering question but this is a no go for sure
感谢您的评论。我将代码更改为仅使用 mouseenter。
是的，您的编辑更好，但仍然... +1，因为这是正在寻找的 OP
那我可以知道如何在悬停中回显结果吗？
我已将此添加到上面的答案中。

getOc​​cCount.php

getOccCount.php