jQuery getJSON輸出什麼都沒有

Question

我試圖用jQuery在HTML文件中顯示JSON數據。

但在HTML我什麼都沒有了輸出，即使null或unindefied

我嘗試用來自Flickr的外部JSON數據，我看到至少[Object]

我也試着來測試文件 - 本地服務器上的HTML和JSON - 再沒有什麼

我在我的服務器上爲應用程序/ json添加MIME類型

我檢查JSON-它是有效的

在Firebug中我看到JSON響應（見下圖）

在同一頁我用和jQuery移動，如果它的事項DW流體網格佈局。

我的JSON與PHP json_encode生成：

({ "title": "Art and Culture", 
"items": [ 
{"id":"kunst-im-tunnel","lat":"51.219917"}, 
{"id":"kunsthalle","lat":"51.227568"}, 
{"id":"kunstsammlung-nordrhein-westfalen","lat":"51.22841"}] 
}) 

爲JSON PHP代碼

<?php 
header('Cache-Control: no-store, no-cache, must-revalidate, private, post-check=0, pre-check=0'); 
header('Pragma: no-cache'); 
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT'); 
header('Content-type: application/json; charset=utf-8'); 
$out = json_encode($post); 
echo "({ \"title\": \"Art and Culture\",\"items\": " .$out." })"; 
?> 

我的JavaScript代碼是：

$.getJSON("http://example.com/app.php?cat=category&jsoncallback=?", 
{format: "json"}, 
function(data){ 
    $.each(data.items, function(i,item){ 

     $('<li>' + item.id + '</li>').appendTo("#list"); 

    }); 

}); 

來自Firebug的屏幕截圖：

Answer 1

您正在生成無效的JSON - 包含整個JSON表達式的括號不應該在那裏。

Answer 2

({ "title": "Art and Culture", 
"items": [ 
{"id":"kunst-im-tunnel","lat":"51.219917"}, 
{"id":"kunsthalle","lat":"51.227568"}, 
{"id":"kunstsammlung-nordrhein-westfalen","lat":"51.22841"}] 
}) 

IS NOT VALID JSON。

但是，這是一個有效的JSON

{ "title": "Art and Culture", 
    "items": [ 
       {"id":"kunst-im-tunnel","lat":"51.219917"}, 
       {"id":"kunsthalle","lat":"51.227568"}, 
       {"id":"kunstsammlung-nordrhein-westfalen","lat":"51.22841"}] 
} 

而且它將很好地工作。這裏是工作示例http://jsfiddle.net/cqfQp/1/

使用jsonlint來驗證JSON。

另一個建議是，儘量避免在循環中調用append函數。創建一個變量並只調用一次該函數。事情是這樣的

 var strItems=""; 
    $.each(data.items, function(i,item){ 
     strItems+='<li>' + item.id + '</li>'; 
    }); 
    $("#list").html(strItems); 

編輯：確保您撥打的getJSON上文件ready功能

$(function(){ 
     $.getJSON("http://example.com/app.php?cat=category&jsoncallback=?",function(data){ 
     var strItems=""; 
     $.each(data.items, function(i,item){ 
      strItems+='<li>' + item.id + '</li>'; 
     }); 
     $("#list").html(strItems);  
    }); 
});