2012-07-09 65 views
0

我試圖讓下面的代碼的工作,應該顯示從當下面的鏈接被點擊我的數據庫中的數據:(無需刷新頁面)顯示數據(JavaScript)的

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

不幸的是,它不工作,它不顯示任何內容,也沒有提供錯誤。

的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); 
?> 
+1

嘗試用'$(document).ready'處理程序包裝您的javascript。 – Engineer 2012-07-09 12:54:18

+2

你可以自己做一些基本的調試...'query2.php'是否正確接收'vehicle_database_id'?它是否與任何行匹配? 'click'處理程序是否會觸發?控制檯中有任何錯誤?檢查了您的網絡查看器?這是一個很長的一系列事件......你需要縮小這部分目前不工作的部分。 – Matt 2012-07-09 12:54:22

回答

2

你通過JSON數據爲 'success_handler',但數據並不功能

內處理
0

請注意添加.error到您的$ .getJSON代碼。如果請求失敗,這會告訴你爲什麼。收到了回覆,但它可能有問題,這會告訴你。請參閱下面的說明,瞭解它爲什麼會失敗。

另外,在代碼中添加一個$(document).ready包裝器是最好的,因爲它可以確保頁面在運行javascript之前完全加載。根據瀏覽器和元素的嵌套方式,它可能會或可能不會準備好附加事件。無論如何,最好把它放在文件中,隨時準備好。

$(document).ready(function(){ 
    $("#bugatti_link").click(function(e){ 
     e.preventDefault(); 
     var vehicle_database_id = $(this).attr("database_id"); 
     var ajax_params = {"brand": vehicle_database_id}; 
     $.getJSON("query2.php", ajax_params, function(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. 
     }) 
     .error(function(data,msg,error){ 
      alert(msg); 
     }); 
    }); 
}) 

重要:對於jQuery 1.4,如果JSON文件包含語法錯誤, 請求通常會失敗默默。出於這個原因避免頻繁手動編輯 JSON數據。 JSON是一種數據交換格式,其中 的語法規則比JavaScript的對象 字面記法更嚴格。例如,以JSON表示的所有字符串, 無論它們是屬性還是值,都必須包含在 雙引號中。有關JSON格式的詳細信息,請參見http://json.org/