使用JavaScript从URL调用和显示JSON数据

时间:2014-10-13 14:59:33

标签: javascript html json

这是我的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>

2 个答案:

答案 0 :(得分: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"
    }
]

答案 1 :(得分:0)

你的Json看起来没问题。

首先尝试检查它:http://jsonformatter.curiousconcept.com/

您需要创建一个对象数组