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

Using JavaScript to call and display JSON data from a URL

本文关键字：显示 JSON 数据 调用 JavaScript URL 使用      更新时间：2023-09-26

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

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"
    }
]

你的Json看起来不太好。

试着先检查一下：http://jsonformatter.curiousconcept.com/

您需要创建一个对象数组

相关文章：