如何将 JSON 数据转换为 HTML 格式？答案

【问题标题】：How do I convert JSON data to display in HTML?如何将 JSON 数据转换为 HTML 格式？
【发布时间】：2011-10-15 15:15:54
【问题描述】：

我正在尝试显示从 ajax 调用中检索到的 JSON 数据，但尽管获得了 JSON 对象，但我无法显示任何数据。

<!DOCTYPE html>

<head>
<title></title>
<script src="jquery.js"></script>
</head>

<script>


$(document).ready(function(){
$.getJSON("http://servername:10000/_vti_bin/webservice/service1.svc/getListTitle",
  {
    username: "a",
    password: "b",
    list: "calendar",
  },
  function(data) {
    alert(1);
    // and the rest
  }
)
});

</script>

<body>
</body
</html>

我没有收到任何警报，但使用 Fiddler 我可以看到 JSON 对象。

{"GetListTitleResult":"Calendar"}

那么我在这里错过了什么？任何帮助表示赞赏。提前致谢。

编辑：似乎代码并没有一直到函数（数据）部分。但萤火虫也没有显示任何语法错误。我仍然通过 Fiddler 获得 JSON 响应。这里有什么帮助吗？

【问题讨论】：

标签： javascript html ajax json

【解决方案1】：

以这种方式更改您的代码 -

$.getJSON("http://servername:10000/_vti_bin/webservice/service1.svc/getListTitle",
{
    username: "a",
    password: "b",
    list: "calendar",
},
function(data)
{
    $.each(data, function(i,item)
    {
        alert(item);
    });
});

在我看来，这些是你犯的以下错误 -

由于data 本身就是一个集合，所以您不需要获取data.items。只需将data 原样传递给each 函数即可。
each 迭代器的回调将为集合中的每个项目传递key 和value。因此，i 将是 GetListTitleResult，item 将是 Calendar。

【讨论】：

也没有弹出警报。但像往常一样，我可以通过 Fiddler 看到 JSON 响应。
这是正确的，只是你没有为回调指定success:。使用$.getJSON 时只需传递一个匿名函数。 api.jquery.com/jQuery.getJSON
@洪毅：做一件事。在success 中，尝试打印data，像这样-alert(data)。看看有没有什么东西弹出来。
@Bryan Downing：是的，你是对的。我会马上修改我的答案！
我仍然没有收到任何警报或弹出窗口。我已经从代码中删除了success。有什么我想念的吗？似乎代码没有进入该步骤，因此没有任何弹出窗口。

【解决方案2】：

如果你的方法看起来像这样：

public string getListTitle(string username, string password, string list, string format)

那么你的 ajax 数据是好的。如果是这样：

public string getListTitle(MyObject data)

那么你需要这个：

{data: { 
    username: "a",
    password: "b",
    list: "calendar",
    format: "json"
  }
}

编辑：

function(data) {
    alert(data.GetListTitleResult);
});

【讨论】：

我的 ajax 数据很好。我得到的 json 响应是正确的。只是我无法让它显示。

【解决方案3】：

这不是getJSON() 的方法签名。您无需使用success: 键入成功回调。您还有太多的大括号、方括号和分号。改成

$.getJSON("http://servername:10000/_vti_bin/webservice/service1.svc/getListTitle",
  {
    username: "a",
    password: "b",
    list: "calendar",
    format: "json"
  },
  function(data) {
    console.log(data);
    // and the rest
  }
);

【讨论】：

我没有从控制台获得任何数据。我的语法有问题吗？