图像地图坐标悬停与ajax不起作用答案

【问题标题】：Image Map Coordinates Hover with ajax not working图像地图坐标悬停与ajax不起作用
【发布时间】：2016-01-24 03:05:42
【问题描述】：

我正在使用带有 ajax 悬停功能的图像映射来从数据库表 major_occurrence 中检索信息。但它似乎根本不适用于 ajax 调用。

悬停是可点击的，因此它将重定向到另一个doRpMap.php，显示发生的详细信息。
请就此事提出建议。谢谢。 *请原谅我是一个编程新手。

我的做法是否正确：

要在我的主页中回调getOccCount.php $result 的变量？
如何将 ajax call() 插入我的？

getOccCount.php

<?php
$location_id = $_GET['location_id'];
$query = "SELECT COUNT(occurrence_id) FROM major_occurrence WHERE  '$location_id' = location_id 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);
?>

主页

<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;
        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>
<body>
<script>
            $(document).ready(function() {
            $('#map span').hover(function () {
                var $t = $(this);
                var location_id = $t.attr("location_id");
                $.ajax({
                    url: 'getOccCount.php',
                    data: "{location_id: location_id}",
                    dataType: 'json',
                    method: 'GET',
                    success: function (result) {
                        $t.html('Total Number of Occurrence: ' + result[0]);
                    }
                }
                });
            });
        </script>
        <ul id="map">
            <li><a class="rpc" href="doRPMap.php?location_id=1"><span location_id="1"><b>RPC</b></span></a></li>
</ul>
</body>

【问题讨论】：

标签： php html css ajax imagemap

【解决方案1】：

一个完整的解决方案需要一些工作。让我给你一些想法。对于格式化时遇到的问题，我深表歉意……这里的 {} 函数似乎对我不起作用。

如您所说，您想查询给定位置的事件数。在您的 getOccCount.php 中，我看不到任何传递位置 ID 的机制。查询似乎总是返回 ALL 次。您可能想要添加类似于
的行
$location_id = @$_REQUEST['location_id'];

并在查询的 WHERE 子句中使用该值。
您的 html 中的  没有 location_id 属性：

RPC

因此，您尝试检索该属性的行将找不到任何内容：

var location_id = $(this).attr("location_id");
您以两种不同的方式执行了两次相同的 ajax 调用。以$.ajax({ 开头的整个块都会调用getOccCount.php，但是，我看不到您对传递给成功回调的data 做任何事情。
然后再次在成功回调函数中编写$.get("getOccCount.php", ...，它基本上再次执行相同的调用。这次您尝试传递location_id 参数，我们已经知道getOccCount.php 中没有查看该参数。
您尝试将结果存储回用户悬停在您上方的span 中，使用$('#map>span') 作为选择器，它将结果存储在ALL 跨度中。

因此，您的解决方案的开始可能如下所示：

<body>
<script>
$(document).ready(function() {
    $('#map span').hover(function () {
        var $t = $(this);
        var location_id = $t.attr("location_id");
        $.ajax({
            url: 'getOccCount.php',
            data: "{location_id: location_id}",
            dataType: 'json',
            method: 'GET',
            success: function (result) {
                $t.html('Total Number of Occurrence: ' + result[0]);
            }
        });
    });
});
</script>
<ul id="map">
    <li><a class="rpc" href="doRPMap.php?locID=1"><span location_id="1"><b>RPC</b></span></a></li>
</ul>
</body>

就像我说的，一个完整的解决方案需要更多的工作，尤其是在将 location_id 传递到您的查询中。希望我的想法有助于取得进展。

【讨论】：

根据建议，我已对现有代码进行了更改，但它似乎仍然无法正常工作。地图仍然显示悬停弹出窗口，只有文本“RPC”，没有任何 ajax 调用。感谢您的建议。
由于您在脚本中使用 jquery，您能否验证 jquery 文件是否被包含在内？
是的。当然。我已经包含在我的脚本中。 ajax 不需要任何脚本吧..
好的，我修复了示例脚本中的 3 个错误。 1.整个脚本需要在$(document).ready()函数内部调用。 2.t.attr 应该是$t.attr。 3. 成功函数的结尾大括号不匹配（删除);）。我建议使用 javascript 调试器或将警报作为第一行放入 hover 函数中，以查看它是否被调用。
抱歉给您添麻烦了。再次进行更改不起作用。谢谢。

getOc​​cCount.php

主页

getOccCount.php