让 JSON 通过 REST 与 JQuery 一起工作？答案

【问题标题】：Getting JSON to work with JQuery over REST?让 JSON 通过 REST 与 JQuery 一起工作？
【发布时间】：2012-07-30 18:04:22
【问题描述】：

我是一名 Python 程序员，所以不确定如何在 JavaScript 中执行此操作。

示例输入（来自提供 JSON 的 REST 服务）：

[{"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>

我确定这只是我的一些 n00bish 错误，但不确定是什么。能指点一下吗？

最好我想要一个带有字典语法的类似 python 的视图（也许Handlebars 可以提供这个？），这样我就可以去for person in this_list: <tr>person.name</tr>。

【问题讨论】：

您遇到错误了吗？您收到服务器的响应了吗？
如果你在域之间使用 JSON，你应该研究并理解 JSONP，这里有一篇有用的博客文章：jquery4u.com/json/jsonp-examples/#.UBmDjMie6z4
[回复已删除的答案]：是的，基本上我希望它生成一个表，其中动态找到这些字段 ID 并将其设置为表头，并将它们的值设置为每条记录作为表行。这可能是一个普遍的问题。
@anAgent：得到一个空白屏幕，什么都没有发生。
@JustinJenkins：我很困惑如何用它来代替上面的，也不确定如何使它成为一个漂亮的表格布局。

标签： jquery json rest getjson handlebars.js

【解决方案1】：

首先，您的 jQuery 甚至不会运行，因为您从未触发过它，或者将它包装在类似 ...

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

请看这里：Introducing $(document).ready()

其次，您无法通过 Javascript 从另一个域加载 JSON，除非您使用 JSONP，请参阅：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

【讨论】：

【解决方案2】：

这里有几个问题。 Justin Jenkins 已经提到了最严重的两个。

除此之外，还要确保来自服务器的答案是一个数组而不是一个对象。您当前的 url 响应带有一个对象。因此，在这种情况下，您必须访问数组：$.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/

【讨论】：