使用Javascript加载JSON文件内容_Javascript_Jquery_Json

使用Javascript加载JSON文件内容

javascript jquery json

使用Javascript加载JSON文件内容,javascript,jquery,json,Javascript,Jquery,Json,我正在尝试使用jQuery/Javascript将内容从JSON文件加载到HTML页面每当我尝试加载页面时，都会有一个空页面代码如下： index.html <!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="e

我正在尝试使用jQuery/Javascript将内容从JSON文件加载到HTML页面

每当我尝试加载页面时，都会有一个空页面

代码如下：

index.html

  <!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>img{ height: 100px; float: left; }</style>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="products">

</div>
<script>
    var my_json;
    $(function(){
        $.getJSON('products.ajson', function(data) {
            var output="<ul>";
            for (var i = 0; i < data.Products.length; ++i) {
                output+="<li>" + data.Products[i].Name + " " + data.Products[i].Album + "--" + data.Products[i].Label+ data.Products[i].Tracks + data.Products[i].Price + data.Products[i].Genre+"</li>";
            }

            output+="</ul>";
            document.getElementById("products").innerHTML=output;

        });
    });
</script>
</body>
</html>

你知道为什么会发生这种情况吗？

你有

产品。产品

和

产品。产品

。返回变量是

products

，它有一个名为

products

的属性。您需要将其称为

产品。产品
也许为了避免歧义，可以调用结果变量result
或其他什么，这样就可以说result.Products

另外，我建议使用标准的for
循环，而不是for..in
循环。如果有任何其他属性分配给数组
原型（这是可能的-某些库会将新函数分配给原型，如indexOf
），您将遇到问题
for (var i = 0; i < products.Products.length; ++i) {
    // do something with products.Products[i]
}

for（变量i=0；i

由于这是一个javascript错误，您可以通过调试器运行它来查看它。每当你看到像这样奇怪的东西，打开控制台（Chrome开发工具、Firebug、IE开发工具等），它将帮助你追踪这些东西。
我按照你之前所说的做了，结果是一个空页面。如果你重新排列产品.产品
和产品.产品
变量，对我来说非常有效（全部）。只要products.json
与HTML页面位于同一目录中，IIS就可以为其提供服务。除了查看调试器中的控制台，还可以查看网络选项卡以确保请求实际发生。这可能是Firefox中的某些设置吗？我会更改所有内容，包括products.products和for循环，以及json文件与html页面位于同一目录中，但它不是working@Brian定义“不工作”。这是一个非常明显的错误，顺便说一句：for（Products.Products中的var i）{
-产品
未定义-您将在js控制台中看到这一点file:///whatever.html
，您的浏览器很可能不喜欢它。我认为如果没有真正的HTTP服务器，AJAX调用将无法工作。为什么要将jquery放在products div中？虽然这不是一个错误，但是：应该直接位于您自己的脚本标记上方-而不是页面的“中间”。打开控制台。检查以确保没有收到任何控制台错误。向ajax调用添加错误处理程序，以便您可以查看ajax调用是否成功或在某处出错。检查以确保您在响应中返回JSON
for (var i = 0; i < products.Products.length; ++i) {
    // do something with products.Products[i]
}