3

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

我想做的是：

  1. 用户点击链接
  2. 使用 AJAX 传递给外部文件的变量
  3. 外部文件使用变量查询 MySQL 数据库
  4. 查询结果出现在工具提示中

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

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

4

1 回答 1

3

好的，你自己已经清楚地规划了你的步骤，我已经根据你的观点写了一篇博文。以下是该帖子的内容，稍加补充以使其更具体地适用于您的“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);

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

由于您将以 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 工具提示插件，其中之一称为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，这些 HTML 将在工具提示中呈现。然后，一旦创建了工具提示，它将切换它以在单击后最初显示工具提示。然后，当您悬停开/关时，工具提示将显示/隐藏。

有关设置 qTip 样式的更多信息，请参阅他们的网站。

于 2012-09-11T09:39:30.707 回答