显示数据库中的数据而不刷新（Javascript）答案

【问题标题】：Display data from database without refreshing (Javascript)显示数据库中的数据而不刷新（Javascript）
【发布时间】：2012-07-09 12:51:58
【问题描述】：

我正在尝试使以下代码工作，当单击以下链接时应该显示我的数据库中的数据：（不刷新页面）

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

【问题讨论】：

尝试用$(document).ready处理程序包装你的javascript。
你能自己做一些基本的调试吗...query2.php 是否正确接收vehicle_database_id？它匹配任何行吗？ click 处理程序甚至会触发吗？控制台中的任何错误？检查您的网络查看器？这是一个 long 事件序列...您需要缩小哪个部分目前不工作。

标签： php javascript jquery sql ajax

【解决方案1】：

您将 json 数据传递给“success_handler”，但该函数内未处理数据

【讨论】：

【解决方案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/。

【讨论】：