使用AJAX、Jquery、PHP和MySQL创建类似Netflix的工具提示

Question

我有一个大型的PHP/MySQL驱动网站，想要添加类似Netflix的工具提示。

我希望它能够：

1. 用户点击链接

2. 传递变量到外部文件，使用AJAX

3. 外部文件使用变量来查询MySQL数据库

4. 查询结果出现在工具提示中

一个问题是页面上有多种类型的链接。一些链接会选择一个表，而其他链接则会选择其他表。

是否有人知道在线教程，可以让我学习如何创建这个功能？

- user1650514

---

我的意思是，你已经自己规划好了一切。逐步学习每个步骤并单独搜索教程，然后将你新学到的技能结合起来制作你想要的东西。特别是在使用jQuery时，这不可能很难。 - jeremy

Answer 1

Ok，你显然已经自己规划好了步骤，我已经基于您的观点写了一篇博客文章在这里。以下是该帖子的内容，稍作添加以使其更具体地针对您的“Netflix”工具提示。

用户单击链接

所以，您需要的第一件事是一些前端代码，告诉链接发出ajax请求而不是实际链接。我建议您使用jQuery来为您做繁重的工作，因此如果您尚未这样做，则首先需要将jQuery脚本包含在页面中，要执行此操作，请将此行添加到HTML文件的头部。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

接下来，您需要为链接添加一个类，例如，您的链接可能如下所示：

<a href="ajax.php?var=value" class="ajax_link">Link</a>

你会发现链接是到提供数据的ajax页面，你通过GET传递了一个名为var的变量到那个页面，稍后我们会讨论这个问题，你还将类设置为“ajax_link”，我们将使用它来从jQuery引用链接。

现在您需要编写一些jQuery来处理链接。为此，您需要在body末尾打开一个<script language="javascript">标签，并放置以下代码：

$(".ajax_link").click(function(e) {

    e.preventDefault(); //Stops link from changing the page

    var link = $(this).attr('href'); //Gets link url

    $.ajax({ //Make the ajax request
      url: link,
      cache: false
    }).done(function( html ) { //On complete run tooltip code

        //Display tooltip code goes here, returned text is variable html

    });
});

我稍后会回到工具提示代码。

使用AJAX传递到外部文件的变量

现在我们需要创建PHP文件ajax.php，这个文件需要连接到数据库并进行必要的查询。首先我会开始编写文件并从GET中获取变量。请参见下面的代码。

<?php

$var = $_GET['var'];

这将创建变量$var，其包含在上述HTML链接中设置的值'value'。您可能希望转义该值，进行一些验证以保护自己免受注入攻击，但我不会在此处涉及到这些。

外部文件使用变量查询MySQL数据库

接下来，您需要连接并查询数据库，然后回显您返回的任何内容。以下是一些代码，用于从名为'data_table'的表中返回列'information'的值，其中某个值等于您的$var。

//connection to the database
$dbhandle = mysql_connect($hostname, $username, $password) 
  or die("Unable to connect to MySQL");

//select a database to work with
$selected = mysql_select_db("examples",$dbhandle) 
  or die("Could not select examples");

//execute the SQL query and return records
$result = mysql_query("SELECT information FROM data_table WHERE value='$var'");
//fetch tha data from the database
while ($row = mysql_fetch_array($result)) {
   echo $row{'information'};
}

//close the connection
mysql_close($dbhandle);

如需了解有关查询数据库的更多信息，请参阅本教程。

由于您将以 Netflix 风格显示工具提示，因此我假设您希望在工具提示中包含许多不同的数据。希望您能够根据传递的“var”提取出所有所需的信息，并调整上述代码。您当然可以传递不止一个变量，例如 ajax.php?var1=value1&var2=value2，然后在 PHP 中检索它，例如 $var1 = $_GET['var1']; $var2 = $_GET['var2']; 等。

然后，您需要格式化 HTML，以便在 PHP 页面中显示在工具提示中的 AJAX 请求返回有效的 HTML，但是我在这里不会详细介绍。

查询结果显示在工具提示中

设置这两个页面后，第一页将向 ajax 页面发送一些值，ajax 页面将回显来自数据库的相应信息，该信息将由第一页接收到 JavaScript 变量html。

这个阶段的最后一步是将返回的文本显示为工具提示。首先，测试页面是否正常工作可能是一个好主意，其中一种简单的方法是显示一个警报，其中包含返回的信息（您也可以记录到控制台）。您可以通过向ajax .done函数添加一些代码来实现这一点：

.done(function( html ) { 

    alert("text: " + html);

});

一旦完成此操作，您应该能够打开页面，单击链接，然后应该会看到弹出警报框显示所需文本。如果在警报框中的“text:”后面没有任何内容，则表示发生了错误，您可能需要检查代码是否正确。如果成功，则继续显示工具提示。

有许多可用的jQuery工具提示插件，其中之一称为qTip。这将允许您创建工具提示并在单击它们时显示它们。您需要下载JavaScript文件和相关CSS以获取工具提示，然后将一些代码添加到.done函数中以创建和显示工具提示。

要将qTip添加到您的页面，请访问qTip网站并下载js和css的最新版本。然后，您必须像这样引用头文件：

<link type="text/css" rel="stylesheet" href="jquery.qtip.min.css" />

而 JavaScript 代码如下：

<script type="text/javascript" src="jquery.qtip.min.js"></script>

这里假设CSS和JS文件与您的索引页面在同一个文件夹中，如果不是，请修改这些链接以指向您放置这些文件的位置。

现在，您只需要向.done函数添加以下内容即可：

$(this).qtip({
    content: {
        text: html
    }
});
$(this).qtip('toggle', true);

这段代码将创建一个 qTip，其中包含从 AJAX 请求返回的内容。由于您想要类似于 Netflix 工具提示的工具提示，因此您的页面应该返回一些 HTML，这些 HTML 将在工具提示内呈现。然后，一旦创建了工具提示，它将在单击时切换以显示工具提示。然后当您悬停/离开时，工具提示将显示/隐藏。

有关样式化 qTip 的更多信息，请参阅其网站。

- Jacob Tomlinson

---

+1 - 那真是太好了，你发那么多提示的人应该得到奖励。 - JonH

感谢您的积极反馈，我认为这是一个不错的思维锻炼。此外，我正在寻找一个写博客文章的主意，所以为什么不选择这个呢？ - Jacob Tomlinson