使用javascript和AJAX進行數據庫過濾

我一直在閱讀和觀看大量有關javascript，jquery和AJAX的教程，但我似乎無法理解如何使unlim500中的這些人有'過濾器'。使用javascript和AJAX進行數據庫過濾

他們的腳本允許您只需點擊一個品牌，然後表格被過濾和刷新（無需重新加載頁面）。

此頁面上活生生的例子，點擊Всемарки： http://www.unlim500.ru/results/

enter image description here

誰能引我到正確的方向？

我該如何製作這樣的過濾器？

的index.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>

query2.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); 
?>

來源

2012-07-08 Joost

您聯繫實際的頁面使用錨來創建一個鏈接到一些JavaScript。我過去的做法（和簡單的方法）是在沒有href指向同一頁面的情況下創建鏈接（以避免重新加載），並將一個click事件附加到會觸發你的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加載器的信息，該加載器可用於在不重新加載頁面的情況下更新頁面。

關於這樣的事情一些有用的鏈接：

jQuery ajax calls
，併爲這種用法更加有用，jQuery getJSON

來源

2012-07-08 00:29:34 iancoleman

謝謝您的回答，我一直在與你的最後幾個小時的代碼，但我似乎無法得到它的工作還沒有。我用我現在的代碼更新了我原來的帖子，必須有一些我做錯了。 – Joost 2012-07-08 22:55:59

在success_handler函數中用'alert（data）'替換註釋，然後當你點擊鏈接時，你應該可以看到來自服務器的數據。對不起，我對PHP不太熟悉，所以無法在query2.php中準確評論你的服務器代碼。您也可以嘗試將$ .getJSON更改爲$ .ajax（使用適當的參數，它們將是一種不同的格式），只是爲了檢查它不是讓您絆倒的東西的一部分。 – iancoleman 2012-07-08 23:52:49

仍然無法得到它的工作。你在做什麼/數據庫/視圖？ – Joost 2012-07-09 09:19:29

您可以使用jQuery插件排序功能。其中之一是tablesorter plugin

所有你需要做的就是下載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-08 00:54:28

使用javascript和AJAX進行數據庫過濾

回答

相關問題