獲取JSON以使用JQuery over REST？

我是一名python程序員，所以我不確定如何在JavaScript中做到這一點。獲取JSON以使用JQuery over REST？

示例輸入（從一個REST服務提供JSON）：

[{"name": "foo", "id": 1024}, {"name": "bar", "id": 1025}]

輸出：

<table> 
    <thead> 
      <tr><th>name</th> <th>id</th></tr> 
    </thead> 
    <tbody> 
      <tr><td>foo</td> <td>1024</td></tr> 
      <tr><td>bar</td> <td>1025</td></tr> 
    </tbody> 
</table>

嘗試（這是據我已經得到，試圖只是在JQuery docs的第一個例子中，在試圖將它作爲表格之前）：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
     <ul class="my-new-list"></ul> 
     <script> 
      $.getJSON('http://www.servicestack.net/ServiceStack.Northwind/customers?format=json', function(data) { 
      var items = []; 

      $.each(data, function(key, val) { 
      items.push('<li id="' + key + '">' + val + '</li>'); 
      }); 

      $('<ul/>', { 
      'class': 'my-new-list', 
      html: items.join('') 
      }).appendTo('body'); 
     }); 
     </script> 
    </body> 
</html>

我確定這只是我的錯誤，但不確定它是什麼。你能指出一下嗎？

最好我想用字典語法（也許Handlebars可以提供這個？），以便我可以去for person in this_list: <tr>person.name</tr> python-like視圖。

來源

2012-08-01 user1438003

您是否收到錯誤？你是否從服務器獲得響應？ – anAgent 2012-08-01 19:26:00

如果您在域之間使用JSON，您應該查看並理解JSONP，以下是一篇有用的博客文章：http://www.jquery4u.com/json/jsonp-examples/#.UBmDjMie6z4 – 2012-08-01 19:33:11

[回覆刪除答案]：是的，基本上我希望它生成一個動態查找並設置爲表標題的字段標識的表，並將它們的值設置爲每個記錄作爲錶行。這可能是一個普遍的問題。 – user1438003 2012-08-01 19:40:13

首先，你的jQuery甚至不運行，因爲你永遠不觸發，或包裹在類似...

$(document).ready(function() { ... });

在這裏看到：Introducing $(document).ready()

二，除非使用JSONP，否則無法通過Javascript從另一個域加載JSON，請參閱：jQuery’s JSONP Explained with Examples。 通常，您將使用PHP，.Net，Ruby來將JSON加載到您的服務器並使其可用於您的腳本。

例子：Handling data in a PHP JSON Object

最後，使用Javascript/jQuery將允許你使用像person.name語法這一切都取決於如何對象或陣列的結構。

至於一個'好'的佈局有太多的選擇，我真的不能真正開始在這裏解釋它們......但是，如果你甚至不能加載數據！ :)

這裏是一個老，但還是有用的教程說明這一點：http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php

來源

2012-08-01 19:58:51

有幾個問題在這裏。賈斯汀詹金斯已經提到了兩個最嚴重的問題。

除此之外，還確定服務器的答案是一個數組而不是一個對象。您當前的網址使用對象進行響應。所以在這種情況下，你必須訪問數組：$.each(data.Customers ...在這裏做的伎倆。

其次，通過遍歷數組調用的函數獲得一個鍵和一個值。但不是對象的屬性，但關鍵是在這種情況下0 ... n（數組的索引）和值是對象。所以如果你想訪問數組中的對象，請改用val.property。然後

的代碼可能是這個樣子：

$.getJSON('http://www.servicestack.net/ServiceStack.Northwind/customers?format=json', function(data) { 

var items = []; 

$.each(data.Customers, function(key, val) { 
    items.push('<li id="' + val.id + '">' + val.name + '</li>'); 
}); 

$('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 
});

當然假設你的要求是成功的。

下面是一個jsfiddle，它不使用請求，但顯示了使用jquery迭代函數。

http://jsfiddle.net/jomikr/zg2y5/

來源

2012-08-01 20:01:32 jokr

獲取JSON以使用JQuery over REST？

回答

相關問題