我有一个大型的PHP / MySQL驱动的网站,我想在其中添加Netflix风格的工具提示.

我想要做的是：

>用户单击链接
>使用AJAX传递到外部文件的变量
>外部文件使用变量查询MySQL数据库
>查询结果出现在工具提示中

皱纹是页面的链接有多种类型.一些会选择一个表,另一些会选择其他表.

有人知道我可以用来学习如何创建此教程的在线教程吗？

解决方法:

好的,您已经清楚地规划了自己的步骤,我根据您的观点here写了一篇博客文章.这是该文章的内容,并做了一些细微的补充,使其更具体地适用于“ 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链接中设置的值“值”.您可能会想逃避该值,请进行一些验证以保护自己免受注入的影响,但在此不再赘述.

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

接下来,您将要连接到数据库并查询该数据库,然后回显返回的内容.这是一些代码,用于从名为“ data_table”的表中返回“信息”列的值,其中某些值等于您的$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);

有关查询数据库的更多信息,请参见this tutorial.

当您将以Netflix的样式显示工具提示时,我假设您将希望在工具提示中包含许多不同的数据.希望您能够修改上面的代码,并根据传递的“ var”提取所有必需的信息.您当然可以传递多个var,例如ajax.php？var1 = value1& var2 = value2.然后像$var1 = $_GET [‘var1’];这样在PHP中检索它； $var2 = $_GET [‘var2’];等等

然后,您需要格式化将显示在此PHP页面的工具提示中的HTML,以便AJAX请求返回将显示在您的工具提示中的有效HTML,但是在此我将不再赘述.

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

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

现在的最后阶段是将返回的文本显示为工具提示.首先,测试页面是否正常可能是一个好主意,而执行此操作的一种简单方法是显示包含返回信息的警报(您也可以登录控制台).您可以通过向ajax .done函数中添加一些代码来做到这一点,如下所示：

.done(function( html ) { 

    alert("text: " + html);

});

完成此操作后,您应该可以打开页面,单击链接,您应该会看到一个弹出对话框,显示要求的文本.如果警报中“文本：”之后没有任何内容,则说明出现了问题,您可能需要检查代码是否正确.如果成功,则继续显示工具提示.

有许多可用的jQuery工具提示插件,其中一个称为qTip.这将使您可以创建工具提示并在单击它们时显示它们.您将需要下载工具提示的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.然后,一旦创建了工具提示,它将在单击时切换为最初显示工具提示.然后,当您打开/关闭时,工具提示将显示/隐藏.

有关样式qTip的更多信息,请访问其网站.