mousemove 上的 jQuery AJAX 调用

Question

我有一个使用 gdimage 创建的图像，其中有 40000 个 5x5 块链接到不同的用户配置文件，我希望当您将鼠标悬停在其中一个块上时，AJAX 将通过检测 x 和 y 坐标从数据库中获取该配置文件当它移动到图像上时的命令。

然后，当单击它时，所获得的信息会链接到该用户的个人资料。

这是我到目前为止所得到的：

Javascript/jQuery:

<script type="text/javascript">

    jQuery.fn.elementlocation = function() {

        var curleft = 0;
        var curtop = 0;

        var obj = this;

        do {

        curleft += obj.attr('offsetLeft');
        curtop += obj.attr('offsetTop');

        obj = obj.offsetParent();

        } while ( obj.attr('tagName') != 'BODY' );


            return ( {x:curleft, y:curtop} );

    };


    $(document).ready( function() {

        $("#gdimage").mousemove( function( eventObj ) {

            var location = $("#gdimage").elementlocation();
            var x = eventObj.pageX - location.x;
            var x_org = eventObj.pageX - location.x;
            var y = eventObj.pageY - location.y;
            var y_org = eventObj.pageY - location.y;

            x = x / 5;
            y = y / 5;

            x = (Math.floor( x ) + 1);
            y = (Math.floor( y ) + 1);

            if (y > 1) {

                block = (y * 200) - 200;
                block = block + x;

            } else {

                block = x;

            }

            $("#block").text( block );
            $("#x_coords").text( x );
            $("#y_coords").text( y );

                $.ajax({
                    type: "GET",
                    url: "fetch.php",
                    data: "x=" + x + "&y=" + y + "",
                    dataType: "json",
                    async: false,
                    success: function(data) {
                        $("#user_name_area").html(data.username);
                    }
                });

        });

    });

</script>

PHP:

<?

    require('connect.php');

    $mouse_x = $_GET['x'];
    $mouse_y = $_GET['y'];

    $grid_search = mysql_query("SELECT * FROM project WHERE project_x_cood = '$mouse_x' AND project_y_cood = '$mouse_y'") or die(mysql_error());

    $user_exists = mysql_num_rows($grid_search);

    if ($user_exists == 1) {

        $row_grid_search = mysql_fetch_array($grid_search);

        $user_id = $row_grid_search['project_user_id'];


        $get_user = mysql_query("SELECT * FROM users WHERE user_id = '$user_id'") or die(mysql_error());

        $row_get_user = mysql_fetch_array($get_user);

        $user_name = $row_get_user['user_name'];
        $user_online = $row_get_user['user_online'];

        $json['username'] = $user_name;
        echo json_encode($json);

    } else {

        $json['username'] = $blank;
        echo json_encode($json);

    }

?>

HTML

<div class="tip_trigger" style="cursor: pointer;">

    <img src="gd_image.php" width="1000" height="1000" id="gdimage" />

    <div id="hover" class="tip" style="text-align: left;">
        Block No. <span id="block"></span><br />
        X Co-ords: <span id="x_coords"></span><br />
        Y Co-ords: <span id="y_coords"></span><br />
        User: <span id="user_name_area">&nbsp;</span>
    </div>

</div>

现在，'block'、'x_coords' 和 'y_coords ' mousemove 位置的变量工作正常并显示在 span 标记中，但它没有从 AJAX 函数获取 PHP 变量，我不明白为什么。

我也不知道如何做到这一点，因此当单击鼠标时，它会获取从 fetch.php 获取的变量，并将用户定向到诸如“/user/view/?id=VAR_ID_NUMBER”之类的页面，

我是否正在接近这个方法错了，还是做错了？有人可以帮忙吗？ :)

Answer 1

请参阅关于不在每次鼠标移动时进行提取的评论。坏坏坏主意。使用一些节流。

也就是说，问题是，您没有在 success 函数中以任何方式使用结果。

您的 PHP 函数不会向浏览器返回任何内容。 PHP 变量不会神奇地变得可供客户端 JavaScript 使用。 PHP 只是简单地运行，生成一个 HTML 页面作为输出，并将其发送到浏览器。然后，浏览器适当地解析发送给它的信息。

您需要修改 fetch.php 以使用您需要的数据生成一些格式正确的 JSON 字符串。它看起来像 { userid: 2837 }。例如，尝试：

echo "{ userid: $user_id, username: $user_name }";

在成功回调中，jQuery 将传递给该函数的第一个参数将是解析（希望格式正确）JSON 结果的结果，以便它成为正确的 JavaScript 对象。然后，在成功回调中，您可以使用结果，如下所示：

//data will contain a JavaScript object that was generate from the JSON
//string the fetch.php produce, *iff* it generated a properly formatted
//JSON string.
function(data) { 
  $("#user_id_area").html(data.user_id);
}

修改您的 HTML 示例，如下所示：

User ID: <span id="user_id_area"> </span>

其中 showHover 是实际显示悬停的辅助函数。

以下是限制 mousemove 函数的模式：

jQuery.fn.elementlocation = function() {

    var curleft = 0;
    var curtop = 0;

    var obj = this;

    do {

    curleft += obj.attr('offsetLeft');
    curtop += obj.attr('offsetTop');

    obj = obj.offsetParent();

    } while ( obj.attr('tagName') != 'BODY' );


        return ( {x:curleft, y:curtop} );

};


$(document).ready( function() {

    var updatetimer = null;
    $("#gdimage").mousemove( function( eventObj ) {
        clearTimer(updatetimer);
        setTimeout(function() { update_hover(eventObj.pageX, eventObj.pageY); }, 500);
    }


    var update_hover = function(pageX, pageY) {
        var location = $("#gdimage").elementlocation();
        var x = pageX - location.x;
        var y = pageY - location.y;

        x = x / 5;
        y = y / 5;

        x = (Math.floor( x ) + 1);
        y = (Math.floor( y ) + 1);

        if (y > 1) {

            block = (y * 200) - 200;
            block = block + x;

        } else {

            block = x;

        }

        $("#block").text( block );
        $("#x_coords").text( x );
        $("#y_coords").text( y );

        $.ajax({
            type: "GET",
            url: "fetch.php",
            data: "x=" + x + "&y=" + y + "",
            dataType: "json",
            async: false,
            success: function(data) {
                //If you're using Chrome or Firefox+Firebug
                //Uncomment the following line to get debugging info
                //console.log("Name: "+data.username);
                $("#user_name_area").html(data.username);
            }
        });

    });

});

Answer 2

您能给我们看一下 PHP 代码吗？您是否在返回数据上使用 json_encode ？

另一种方法是简单地将图像作为

容器的背景，并在

中排列 元素。 code> 在您需要它们的地方，然后只需使用 jQuery 绑定到它们的点击处理程序即可。

如果浏览器不支持 jQuery 或 javascript，这也有好处，因为您实际上可以将所需的 URL 放入锚点的 HREF 属性中。这样，如果未启用 jQuery，链接将正常加载。

框架实现如下所示：

示例 CSS

#imagecontainer {
background-image: url('gd_image.php'); 
width: 1000px; 
height: 1000px;
position: relative;
}

#imagecontainer a {
height: 100px;
width: 100px;
position: absolute;
}

#block1 {
left: 0px;
top: 0px;
}

#block2 {
left: 100px;
top: 0px;
}

示例 HTML

<div id="imagecontainer">
<a href="" id="block1"></a>
<a href="" id="block2"></a>
</div>

示例 jQuery

$(document).ready(function(){
$("#block1").click(function(){ /* do what you need here */ });
});