如何在每個選項卡中顯示使用ajax獲取的json數據

Question

我有一個帶有返回json數據的方法的struts 2操作類。

我在我的jsp上有8個選項卡。當用戶點擊一個標籤時，我想對此方法進行ajax調用。我希望返回的json數據被解析並用可以在此選項卡中呈現的html進行修飾。

我正在使用jquery選項卡製作tabs。

• 如何捕獲返回的json數據？我可以訂閱jQuery發佈的一些事件嗎？
• 如何處理返回的json數據？例如; JSON數據：

{城市：{名稱= 「紐約」，別名爲 「NY」，imgPath = 「文件路徑/ img1.jgp」}}

我想提取姓名和大膽它。 使用imgPath來定義img標籤等

Answer 1

您可以通過將數據參數傳遞給將在成功時執行的ajax調用成功回調方法來捕獲返回的Json數據。 http://api.jquery.com/jQuery.ajax/

您可以使用jQuery parse.json方法並將json字符串傳遞給它。 http://api.jquery.com/jQuery.parseJSON/

還有一件事，你的例子json字符串看起來不是有效的。您可以通過簡單地粘貼您的json數據或通過粘貼url來檢查您的json是否有效從此鏈接http://jsonlint.com/。

Answer 2

$(document).ready(function() { 
      var data = { "City": [{ "name": "New York1", "alias": "NY1", "imgPath": "filePath/img1.jgp" }, { "name": "New York2", "alias": "NY2", "imgPath": "filePath/img2.jgp" }, { "name": "New York3", "alias": "NY3", "imgPath": "filePath/img3.jgp" }, { "name": "New York4", "alias": "NY4", "imgPath": "filePath/img4.jgp"}] }; 

      if (data.City.length > 0) { 
       $('body').prepend('<div id="tabs1"><ul></ul></div>'); 

       $.each(data.City, function (i, entity) { 
        $('#tabs1 ul').append($('<li><a href="#tabs1-' + (i + 1) + '">' + entity.name + '</a></li>')); 
        $('#tabs1').append('<div id="tabs1-' + (i + 1) + '"><p>Image Path:' + entity.imgPath + '</p></div>'); 
       }); 

       $("#tabs1").tabs(); 
      } 
     });​ 

現場演示中看到此鏈接：http://jsfiddle.net/nanoquantumtech/ffbx5/