大佬教程收集整理的这篇文章主要介绍了具有AJAX,Jquery,PHP和MySQL的Netflix风格的工具提示，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个大型的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链接中设置的值“值”.您可能会想逃避该值,请进行一些验证以保护自己免受注入的影响,但在此不再赘述.
接下来,您将要连接到数据库并查询该数据库,然后回显返回的内容.这是一些代码,用于从名为“ 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文件与索引页位于同一文件夹中,如果没有,请修改这些链接以指向放置这些文件的位置.
$(this).qtip({
content: {
text: html
}
});
$(this).qtip('toggle', truE);
此代码将创建一个qTip,其中包含从AJAX请求返回的所有内容.当您获得类似于Netflix工具提示的工具提示时,您的页面应返回一些将在工具提示中呈现的HTMl.然后,一旦创建了工具提示,它将在单击时切换为最初显示工具提示.然后,当您打开/关闭时,工具提示将显示/隐藏.
有关样式qTip的更多信息,请访问其网站.
以上是大佬教程为你收集整理的具有AJAX,Jquery,PHP和MySQL的Netflix风格的工具提示全部内容，希望文章能够帮你解决具有AJAX,Jquery,PHP和MySQL的Netflix风格的工具提示所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。