悬停时更改 MySQL 结果

Question

我正在为魔兽世界物品制作工具提示。 wowhead.com 有一个类似的插件，但他们对整个插件使用 JavaScript。所以，我想这样做，当我将鼠标悬停在一个段落上时，我的脚本中的 MySQL 查询应该改变。它应该从隐藏的输入中获取一个值。所以，我的表格是这样的：

<form action="functions/itemvar.php" method="POST">
<p class="name">Random Item Name</p>
<input type="hidden" id="entry1" name="entry" value="12345">
</form>

我的 SQL 查询如下所示：

SELECT * FROM item_template WHERE entry = 12345

因此，当您将鼠标悬停在段落标记上时，PHP 脚本中的 MySQL 查询条目应该会发生变化。所以 MySQL 查询从 input hidden 中获取结果。

我确实为刚刚写的 12345 临时条目使用了变量。

Answer 1

您可以使用 jQuery 和 Ajax 做到这一点。为要绑定悬停事件的每个段落分配一个自定义类。然后使用 jQuery 捕获该类，并在悬停时对提供查询结果的 PHP 脚本执行 AJAX 调用。

Answer 2

到目前为止，您尝试了什么？
您只需要在悬停事件时向 php 文件发送 AJAX 请求，对吧？

1. $.hover()
2. $.get()

加SQL Injection！

Answer 3

听起来你需要一些东西才能让它工作；总体而言，您需要一种方法：

• 检测到客户端已将鼠标悬停在您的项目名称上
• 在客户端（即在浏览器中）获取隐藏值
• 将隐藏值发送到服务器
• 处理响应（例如绘制工具提示）

您发布的 html 非常接近实现这一目标，但我猜您将在一个页面中拥有多个项目链接。考虑到这一点，您可以首先像这样简化您的标记：

<p class="name item-hover-link" data-item-id="12345">
    Barman's Shanker
</p>

现在您的 html 包含所有必要的信息。但是，您发布的版本也很好，它只是包含了很多您不一定需要实现您所说的特定目标的东西。

接下来，我们将使用jQuery 来检测您是否将鼠标悬停在某个项目上。 注意： 许多 Web 开发人员倾向于使用 jQuery 而不是原始的 javascript，尤其是与 ajax 相关的东西。我特别懒，所以我也选择了。

确保jQuery/javascript 出现在您的 html 之后或在 onLoad 事件中启动；否则，它将无法找到任何“.item-hover-link”元素。

function drawTooltip(data) {
    // Google different tooltip drawing implementations
    // I'd be amazed if there isn't a 'WoW-style' tooltip
    // guide somewhere out there
}

$(".item-hover-link").hover(
    function() {
        // Mouse entering the link

        // $this refers to the <p> that was hovered over
        var $this = $(this);

        // Check if any previously-loaded item data has been stored
        // e.g. they have hovered over it before
        var loadedItemData = $this.data("loaded-item-data");

        if(loadedItemData !== undefined){
            // It's been previously loaded! Use that data to draw
            // a tooltip, no need for a server round-trip
            drawTooltip(loadedItemData);
        }
        else {
            // It hasn't been loaded before, you need to GET it
            // from the server

            // Here's where data-item-id="12345" comes in
            var id = $this.data("item-id");

            var request = "/functions/itemvar.php?id=" + id;

            $.get(request, function(data) {
                // Your php is generating the response, do whatever
                // with it here, I'll assume you didn't touch it.

                drawTooltip(data);

                // And cache it, to prevent another round trip if they
                // re-hover (care for memory leaks though)
                $this.data("loaded-item-data", data);
            });
        }

    },
    function() {
        // Mouse leaving the link, you should use this
        // area to remove any initialized stuff while doing
        // your round-trip (loading animations, get requests,
        // tooltips, etc)
        hideTooltip();
    }
);

这种方法应该可以帮助您完成大部分工作。但是，您需要确保您的后端符合请求（我假设它是对工具提示存根的 GET 请求？）。此外，您还需要一种绘制自定义工具提示的方法，就像 wowdb 和 thottbot 一样（这对孩子们来说仍然很流行吗？）。如果你想要一个快速的解决方案或查看谷歌工具提示的各种方法，我会推荐 jQueryUI tooltip 之类的东西。