为什么Json数据不在localhost中显示?

时间:2014-04-12 13:46:56

标签: jquery ajax json

我正在使用Apache运行此程序,尝试在我的html页面中加载Json数据。为什么这不起作用?

HTML:

<head>
<script src="http://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>
</head>
    <body>
    <a href="#" id="car">Car</a>

    <div id="content">

    </div>
</body>

JQuery的:

    $(document).ready(function() {

        $.getJSON('data.json',function(data){

            $('#content').empty();

            $.each(data, function(entryIndex, entry){
                var html = '<div class="data">';                      
                html += '<h3>' + entry['company'] + '</h3>';
                html += '<div class="product">' + entry['product'] + '</div>';                  
                html += '<div class="type">' + entry['type'] + '</div>';


                if(entry['color']){
                    html += '<div class="color">';                                          
                    html += '<ol>';
                    $.each(entry['color'],function(colorIndex, color){
                        html += '<li>' + color + '</li>';                          
                    }); 
                    html += '</ol>';                        
                    html += '</div>';   

                }
                $('#content').append(html);

            });                        
        });
        return false;

});

JSON(data.json):

[
{
    "company" : "Toyota",
    "product" : "Prius",
    "color" : [
      "white pearl",
      "Red Methalic",
      "Silver Methalic"
    ],
    "type" : "Gen-3"
},
{
    "company" : "Toyota",
    "product" : "New Fortuner",
    "color" : [
      "Super White",
      "Silver",
      "Black"
    ],
    "type" : "Fortuner TRD Sportivo Limited Edition"
}
]

2 个答案:

答案 0 :(得分:2)

这个答案大多是从对问题和其他答案的评论中拼凑而成的。

  • 您的JavaScript控制台显示该请求收到404错误
  • 您声明您正在使用记事本创建JSON文件

当您使用它时,Notepad会在任何文件名的末尾粘贴.txt。这导致您最终得到一个名为data.json.txt的文件,您的服务器无法找到该文件,因为您要求data.json

您可以重命名该文件以解决此问题。

您也可以使用其他编辑器来创建文件。针对程序员的大多数文本编辑器都会明确支持JSON(具有语法突出显示和自动缩进等功能),并期望处理不寻常的文件扩展名(因此不会添加.txt以便提供帮助)

答案 1 :(得分:-2)

从记事本文件创建了Json数据,这是完全错误的。它应该使用任何HTML编辑器,如Notepad ++或Dreamweaver,如软件。最后问题是固定的。