我如何解析JSON與jQuery

我需要分析一個簡單的JSON響應（從我的Rails應用程序）：我如何解析JSON與jQuery

[ 
    { 
     "photo": 
      { 
       "updated_at":"2010-10-14T19:12:35Z", 
       "photo_file_size":206422, 
       "created_at":"2010-10-14T19:12:01Z" 
      } 
     }, 
     { 
     "photo": 
      { 
       "updated_at":"2010-10-16T18:19:38Z", 
       "photo_file_size":83593, 
       "created_at":"2010-10-14T19:14:35Z" 
      } 
     } 
]

我使用：

$(document).ready(function() 
{ 
    $.ajax({ 
    type: "GET", 
    url: "http://myurl...",  
    dataType: "jsonp", 
    success: function(data){ 
     console.log(data);   
     //... 
      }); 

    } 
    }); 
});

螢火控制檯輸出指示響應沒問題！

我該如何解析每個使用函數（數據）的所有照片塊的photo_file_size？

任何幫助，將不勝感激:-)

來源

2010-10-27 Lamp

jQuery會自動將數據解析爲JSON，因爲您設置了數據類型。在成功的方法，你可以使用基本的JavaScript做一些與photo_file_size

$(document).ready(function(){ 
    $.ajax({ 
    type: "GET", 
    url: "http://myurl...",  
    dataType: "json", 
    success: function(data){ 
     for(var i=0; i<data.length; i++){ 
     alert(data[i].photo.photo_file_size); 
     } 
    } 
    }); 
});

不過，如果你使用JSONP，你需要處理它完全不同。 JSONP有一個回調函數，將在<script>代碼來投放（避免同源策略，見維基）

<script> 
    function callback(data){ 
     for(var i=0; i<data.length; i++){ 
     alert(data[i].photo.photo_file_size); 
     } 
    } 
</script> 
<script src="yoururltojsonp.php?callback=callback"></script>

而且，看看jQuery's solution

來源

2010-10-27 17:53:54 Harmen

Thanx，但是，如果我更改'jsonp'與'json'響應失敗！如何在jsonp中查看數據？我的網址如下所示：http：// localhost：3000/api/people？username = jim＆callback = user，爲什麼這不是JSONP數據？ – Lamp 2010-10-27 18:46:02

@vic，因爲您提供的代碼是基本的JSON結構，我認爲這只是JSON，而不是JSONP。我會更新我的答案，JSONP是完全不同的 – Harmen 2010-10-27 18:52:03

'$ .ajax'函數的簡寫http://api.jquery.com/jquery.getjson/ – Jiemurat 2014-02-14 11:08:19

jQuery的JSON解析器$.parseJSON()。所以，在你成功的功能：

var json = $.parseJSON(data);

，或者，如果你不使用JSON響應類型：

var json = $.parseJSON(data.responseText);

，你應該是好去。

來源

2010-10-27 17:52:41 mway

這不是JSONP數據，這應該只是JSON。然後，您將有權訪問數據，就好像它是一個正常變量。在這種情況下，數據將是一個數組。

這是假設服務器與請求JSON的服務器相同。

如果你需要JSONP數據看起來應該與此類似：

$callback$([ 
    { 
     "photo": 
     { 
      "updated_at":"2010-10-14T19:12:35Z", 
      "photo_file_size":206422, 
      "created_at":"2010-10-14T19:12:01Z" 
     } 
    }, 
    { 
     "photo": 
     { 
      "updated_at":"2010-10-16T18:19:38Z", 
      "photo_file_size":83593, 
      "created_at":"2010-10-14T19:14:35Z" 
     } 
    } 
]);

$ $回調無論是在回調傳遞的只是一個簡單的打印= GET變量。實質上，JSONP實際上只是調用一個函數（回調）。它作爲腳本標記放置在DOM中，這就是爲什麼它規避了跨域問題。（也許這是太多的信息:)

來源

2010-10-27 17:54:03 Sandro

+1在我的回答中我沒有提到這一點，雖然這是非常重要的 – Harmen 2010-10-27 17:57:25

如果我更改'jsonp'與'json'響應失敗！如何在jsonp中查看數據？ – Lamp 2010-10-27 18:40:36

我已經更新了我的答案以顯示JSONP數據的外觀。 – Sandro 2010-10-27 19:14:39

function(data) 
{ 
    for(var i=0; i<data.length; i++) 
    console.log(data[i].photo.photo_file_size); 
}

function(data) 
{ 
    for(var i=0; i<data.length; i++) 
    console.log(data[i].photo.photo_file_size); 
}

來源

2010-10-27 17:56:27

我如何解析JSON與jQuery

回答

相關問題