使用 JavaScript 从 URL 调用和显示 JSON 数据 [关闭]答案

【问题标题】：Using JavaScript to call and display JSON data from a URL [closed]使用 JavaScript 从 URL 调用和显示 JSON 数据 [关闭]
【发布时间】：2014-10-13 23:07:04
【问题描述】：

这是我的 html 代码，用于从包含 json 数据的链接中获取数据。但它不起作用，谁能告诉我为什么？

 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.10.1.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("#btnjson").click(function(){
 $.getJSON("http://waitrapp.co/bipin/practice.php",function(result){
 $("#ID").append(result.ID);
 $("#Item_Name").append(result.Item_Name);
 $("#Item_Price").append(result.Item_Price);
  });
 });
 });
 </script>
 </head>
 <body>

 <button id="btnjson">Load!!!</button>
 <p id="ID">ID: </p>
 <p id="Item_Name">Item Name: </p>
 <p id="Item_Price">Item Price: </p>
 </body>
 </html>

【问题讨论】：

定义“不工作”。查看浏览器的开发者工具。查看 JavaScript 控制台。它是否报告任何错误？查看“网络”选项卡。是否正在提出请求？它得到回应了吗？它们是否包含您期望的数据？

标签： javascript html json

【解决方案1】：

http://waitrapp.co/bipin/practice.php 的 HTTP 响应不包含正确的 CORS 标头，如果您在 php 文件中设置它应该可以工作：

header("Access-Control-Allow-Origin: *");

这可能太简单了，所以看看这个 SO 帖子：https://stackoverflow.com/a/9866124/441907

正如 Salec 指出的，您的 JSON 无效，您缺少括号 [] 和元素之间的逗号：

[
    {
        "ID": "10",
        "Item_Name": "Pizza",
        "Item_Price": "2.99",
        "Date_Created": "2014-10-01 08:27:41"
    },
    {
        "ID": "11",
        "Item_Name": "Burrito",
        "Item_Price": "2.99",
        "Date_Created": "2014-10-01 09:13:03"
    },
    {
        "ID": "12",
        "Item_Name": "Burger",
        "Item_Price": "4.99",
        "Date_Created": "2014-10-06 19:56:01"
    },
    {
        "ID": "13",
        "Item_Name": "Steak",
        "Item_Price": "10.99",
        "Date_Created": "2014-10-06 19:56:17"
    }
]

【讨论】：

JSONP 是一种在编写 CORS 规范之前绕过同源策略的 hack。为什么 hack 比（更灵活的）标准更受欢迎？
@Quentin 你是对的，只要不需要支持旧版浏览器。

【解决方案2】：

您的 Json 看起来不太好。

先试试看：http://jsonformatter.curiousconcept.com/

你需要创建一个对象数组

【讨论】：