0

我在这里和其他来源阅读了许多描述，描述了使用 jquery 获取 json 并构建列表。所以，我有一个超级简单的 html 页面，上面有一个 ul：

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.2.js"></script>        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">    </script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
    <script src="js/main.js"></script>
    <script>
      $(document).ready(getElementsInGroup);
    </script>
</head>
<body>
<ul id="memberList">
</ul>
</body>
</html>

我有两种方法可以在 main.js 中获取成员。第一个使用 getJson：

function getElementsInGroup() {
var url = 'http://108.250.12.12:8080/members?format=json&jsonp=?';
$.getJSON(url, null, function(data) {
  var items = [];
  $.each(data, function(index, element) {
      items.push("<li>" + element.text + "</li>");
      });
  $('#memberList').append( items.join('') );
  });
};

我可以在 firebug 中看到调用被触发并且结果返回：

[{"text": "Bob Jones", "id": 1}, {"text": "Mary Smith", "id": 2}]

但是，该列表不会显示，也不会出现任何错误。因此，我尝试创建一个函数版本，将硬编码结果放入其中：

function getElementsInGroup2() {
      var items = [];
      var data = [{"text": "Bob Jones", "id": 1}, {"text": "Mary Smith", "id": 2}];
      $.each(data, function(index, element) {
          items.push("<li>" + element.text + "</li>");
          });
      $('#memberList').append( items.join('') );
};

这产生了我正在寻找的列表。你有什么可以看出我做错了吗？

4

2 回答 2

0

您正在从 JSON 帖子中获取结果，因此在这里您需要使用 for 循环来绑定您的列表。像 for(i=0;i<=data.length;i++){ items.push('

  • ' + 数据[i].text + '
    • '); }

    于 2013-07-04T10:14:04.263 回答
    0

    The answer was actually that the route that I was using did not support jsonp. I modified the route and all is good now. Thank you @Felix.

    于 2013-07-05T15:56:31.773 回答