無需刷新即可顯示數據庫中的數據（Javascript）

Question

我正在嘗試獲取以下代碼，以便在單擊以下鏈接時顯示來自我的數據庫的數據:(不刷新頁面）

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

Answer 1

將json數據傳遞給'success_handler'，但不在該函數內處理數據

Answer 2

請注意在$ .getJSON代碼中添加.error。 如果請求失敗，這將告訴您原因。 收到了回復，但可能會有問題，這會告訴您。 請參閱下面的注釋，了解為什么它可能會無聲地失敗。

此外，在代碼周圍添加$（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/ 。