0

我一直在阅读和观看很多关于 javascript、jquery 和 AJAX 的教程，但我似乎无法理解如何像 unlim500 中的这些人那样制作“过滤器”。

他们的脚本允许您只需单击一个品牌，然后表格就会被过滤和刷新（无需重新加载页面）。

此页面上的实时示例，单击Все марки： http ://www.unlim500.ru/results/

在此处输入图像描述

谁能引导我走向正确的方向？

我怎样才能制作这样的过滤器？

索引.php =

<a id="bugatti_link" href="#" database_id="Bugatti">Bugatti</a>

<script>
$("#bugatti_link").click(load_ajax);

function load_ajax(e) {
    var link = $(e.target); 
    var vehicle_database_id = link.attr("database_id");
    var ajax_params = {"brand": vehicle_database_id};
    $.getJSON("query2.php", ajax_params, success_handler)
}

function success_handler(data) {
    //data variable contains whatever data the server returned from the database.
    //Do some manipulation of the html document here. No page refresh will happen.
}
</script>

查询2.php =

<?php
$host = "xx";
$user = "xx";
$db   = "xx";
$pass = "xx";

$pdo = new PDO("mysql:host=" . $host . ";dbname=" . $db, $user, $pass);

$rows = array();
if(isset($_GET['brand'])) {
    $stmt = $pdo->prepare("SELECT brand FROM cars WHERE brand = ? ");
    $stmt->execute(array($_GET['brand']));
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
4

2 回答 2

2

您链接的实际页面使用锚点来创建指向某些 javascript 的链接。我过去这样做的方法（和 imo 更简单的方法）是创建一个没有 href 指向同一页面的链接（以避免重新加载），并将点击事件附加到链接上，这将触发您的 ajax 调用。

例如 - HTML - 要点击的链接

<a id="bugatti_link" href="#" database_id="2">Bugatti</a>

然后在jQuery中

$("#bugatti_link").click(load_ajax);

function load_ajax(e) {
    var link = $(e.target);
    var vehicle_database_id = link.attr("database_id");
    var ajax_params = {"id": vehicle_database_id};
    $.getJSON("the/url/to/the/database/view", ajax_params, success_handler)
}

function success_handler(data) {
    //data variable contains whatever data the server returned from the database.
    //Do some manipulation of the html document here. No page refresh will happen.
}

在服务器上，您将收到一个 GET 请求，the/url/to/the/database/view该请求将有一个名为“id”的参数，其值为“2”，因此您可以在第 2 行获取车辆并从该车辆返回您想要的任何数据。

希望这可以让您深入了解如何将常规链接转换为 ajax 加载器，该加载器可用于更新页面而无需重新加载。

关于这类事情的一些有用的链接：

于 2012-07-08T00:29:34.967 回答
0

您可以使用 jquery 插件来实现排序功能。其中之一是tablesorter 插件

您所要做的就是下载 jquery 和 tablesorter.js，然后将它们包含在您的页面中。下面的代码假定您在拥有正在运行的文件的同一文件夹中拥有 jquery 和 tablesorter：

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

将 id 添加到您的表中：

<table id="myTable">

然后在文档加载时使用 tablesorter：

<script>
$(function(){
 $("#myTable").tablesorter(); 
});
</script>
于 2012-07-08T00:54:28.677 回答