php - 具有AJAX，Jquery，PHP和MySQL的Netflix风格的工具提示

Question

我有一个大型的php/mysql驱动的网站，我想添加netflix风格的工具提示。
我想做的是：
用户单击链接
使用ajax传递到外部文件的变量
外部文件使用变量查询mysql数据库
查询结果显示在工具提示中
一个问题是页面有多种类型的链接。有的选择一个表，有的选择其他表。
有人知道我可以用来学习如何创建这个的在线教程吗？

Answer 1

好吧，你自己已经清楚地列出了你的步骤，我也根据你的观点写了一篇博客文章。以下是这篇文章的内容，并添加了一些小的内容，使其更具体地显示在“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来处理链接。要做到这一点，您需要在您的身体末端打开一个<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);

有关查询数据库的更多信息，请参见here。
由于您将以netflix的风格显示工具提示，我假设您将有很多不同的数据希望包含在工具提示中。希望您能够修改上面的代码，并根据传递的“var”提取出所有必需的信息。当然，您可以传递多个var，例如ajax.php?var1=value1&var2=value2。然后在php中检索它，比如$var1 = $_GET['var1']; $var2 = $_GET['var2'];等。
然后，您需要格式化将显示在此php页面的工具提示中的html，以便ajax请求返回将显示在工具提示中的有效html，但我在此不再介绍。
查询结果显示在工具提示中
一旦设置了这两个页面，第一个页面将向ajax页面发送一些值，ajax页面将从数据库中回显相应的信息，这些信息将由javascript变量html中的第一个页面接收。
最后一步是将返回的文本显示为工具提示。首先，测试您的页面是否工作是一个好主意，一个简单的方法是显示一个包含返回信息的警报（您也可以登录到控制台）。您可以通过向ajax.done函数添加一些代码来完成此操作，如下所示：

.done(function( html ) { 

    alert("text: " + html);

});

完成此操作后，您应该能够打开页面，单击链接，您应该会看到一个弹出的警告框，显示所需的文本。如果警报中的“文本”之后没有任何内容，则说明有问题，您可能需要检查代码是否正确。如果成功，则继续显示工具提示。
有许多可用的jquery工具提示插件，其中一个称为this tutorial。这将允许您创建工具提示并在单击它们时显示它们。您需要下载工具提示的javascript文件和相关css，然后在.done函数中添加一些代码来创建和显示工具提示。
要向页面添加qtip，请访问qtip站点并下载js和css的最新版本。然后你必须像这样引用头部的文件：

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

像这样的js：

<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样式的更多信息，请参见他们的网站。