如何在不刷新页面的情况下使用MySQL查询过滤页面上列出的项目?

时间:2012-08-10 22:33:20

标签: php mysql ajax forms

我有一个页面,它使用select查询从MySQL数据库中的轨道生成音频播放列表,即

$query1="SELECT * FROM tracks WHERE uploaded_page='$this_path_short' ORDER BY id DESC";

我希望用户能够以各种方式过滤播放列表,并且计划是在表单中有一系列单选按钮,这些按钮将生成一个新的MySQL查询,以便仅列出所需的曲目。

我想知道使用此查询更新播放列表的最佳方法。理想情况下,这可以在不刷新页面的情况下完成。

5 个答案:

答案 0 :(得分:3)

添加AJAX:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

使用按钮的示例:

  <a href="#" onClick="$('#content_s').load('/sql.php?value=some_path');">News</a>

如果需要,您可以在CSS文件中编辑$ content_s的悬停。

并在html中显示数据:

<div id="content_s">
 </div>

你的sql.php文件就像:

<?php
$this_path_short = $_GET['value']; // stay frosty, it's SQLi vurnable, but this will get "some_path" I belive. I didn't test this though, but it should work
$query1="SELECT * FROM tracks WHERE uploaded_page='$this_path_short' ORDER BY id DESC";
...

您可以使用PHP生成链接

编辑编辑编辑编辑编辑编辑编辑

的index.php 你说播放列表的路径是在index.php中所以:

<html>
<head>
<title>Playlist</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head>
<?php $path = 'http://www.youtube.com/watch?v=Jx0oOZmY5KM'; ?>
<div id="menu">
<a href="#" onClick="$('#content_s').load('playlist.php/?val=<?php echo $path ?>');">Load Playlist</a>
</div>
<div id="content_s">
</div>
</html>

playlist.php:

<?php
$this_path_short = $_GET['val']; 
echo '$this_path_short = ' .$this_path_short.'<br>';
echo 'This is how the query looks like right now: "SELECT * FROM tracks WHERE uploaded_page=\''.$this_path_short.'\' ORDER BY id DESC";';
?>

此示例将为您提供有关其工作原理的信息

1

enter image description here

2

enter image description here

答案 1 :(得分:1)

你必须使用Ajax。 jQuery库对此非常有用。

http://api.jquery.com/jQuery.ajax/

答案 2 :(得分:0)

非常重要:

  • 只需使用过滤器/playList.php?filter =。
  • 发出Ajax请求
  • 在repsonse中,您只放置播放列表而不是html页眉和页脚。
  • 用新的播放列表替换播放列表的内容。

也许你可以使用jQuery

答案 3 :(得分:0)

检查一下:http://www.datatables.net/有用的插件

答案 4 :(得分:-1)

每当您想要新页面内容而不刷新页面时 - 解决方案就是AJAX。我用几句话无法解释AJAX,但这里有一个很好的教程:

http://www.w3schools.com/ajax/default.asp