Question

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

我希望它做的是：

用户点击链接
使用AJAX传递给外部文件的变量
外部文件使用变量来查询MySQL数据库
查询结果显示在工具提示

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

有没有人知道我可以用来学习如何创建这个教程？

Answer 1

好的，你自己已经清楚地绘制了自己的步骤，并根据你的观点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链接中设置的值'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);

有关查询数据库的更多信息，请参阅this tutorial。

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

然后，您需要格式化将显示在此PHP页面中工具提示内的HTML，以便AJAX请求返回将在您的工具提示中显示的有效HTML，但我再说明这一点。

查询结果显示在工具提示

中

一旦你设置了这两个页面，第一页就会向ajax页面发送一些值，ajax页面将回显数据库中的相应信息，这些信息将由JavaScript变量{{1]中的第一页接收。 }}

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

html

完成此操作后，您应该能够打开页面，单击链接，然后您会看到一个弹出警告框，显示所需的文本。如果警告中的'text：'后面没有任何内容，那么出现了问题，您可能需要检查代码是否正确。如果成功，则继续显示工具提示。

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

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

.done(function( html ) { 

    alert("text: " + html);

});

和js是这样的：

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

这假设css和js文件与索引页面位于同一文件夹中，如果不是，请修改这些链接以指向放置这些文件的位置。

现在您需要添加到.done函数中的所有内容如下：

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

此代码将创建一个包含从AJAX请求返回的内容的qTip。当您在使用类似于Netflix工具提示的工具提示后，您的页面应返回一些HTML，这些HTML将在工具提示中呈现。然后，一旦创建了工具提示，它将切换它以在最初单击时显示工具提示。然后当您悬停/关闭时，工具提示将显示/隐藏。

有关样式化qTip的更多信息，请访问他们的网站。

Netflix风格的工具提示，包括AJAX，Jquery，PHP和MySQL

1 个答案:

用户点击链接

使用AJAX

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

查询结果显示在工具提示