2

我真的有些莫名其妙：

我在一个名为的文件中有以下 JSON 数据：data.json

{
   "locations": [
      {
         "title": "The Space Needle",
         "latitude": 47.619,
         "longitude": -122.348
      },
      {
         "title": "Albany",
         "latitude": 46,
         "longitude": -74
      }
   ]
}

当我使用以下代码尝试显示数据时，我什么也得不到：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Another gone south</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
    $.getJSON("data.json",function(data){
        $.each(data.locations, function(i,location){
                content += '<p>' + location.title + '</p>';
                content += '<p>' + location.latitude + '</p>';
                content += '<p' + location.longitude + '</p>';
                content += '<br/>';
                alert('aler called');
                $(content).appendTo("#loc");
        });
    });   
});
/* ]]> */
</script>
</head>
<body>
        <div class="container">
                <div class="span-24">
                       <h2>Check out the following locations:</h2>
                                        <div id="loc">
                                        </div>
                </div>
        </div>
</body>
</html>
4

2 回答 2

1

假设您的 json 返回您的循环似乎很好，您可能需要做的唯一一件事就是在使用它之前解析您的 JSON 结果：

在说完之后，我再次查看了这个JayC，我将 JSON 值添加到我的示例中到一个字符串 (d'oh)，当然，我把它变成了一个对象，每个都工作得很好。

使用 JSON 对象（不是字符串）查看演示

基本上，您的代码应该可以正常工作，这意味着请求会产生错误，或者您什么也得不到。

检查浏览器中的调试控制台是否有任何错误。在 FF 中您可以使用 FireBug 或在 Chrome 和 IE 中使用内置的。

于 2012-08-14T16:54:41.357 回答
0

只是一个狂野的镜头，你使用的是什么浏览器？不是铬吗？Firefox 也不能正常工作吗？因为我已经在 Firefox 中尝试过了，它可以正常工作，同时显示数据和警报。在 Chrome 中我得到错误

XMLHttpRequest 无法加载 file:///PATH。Access-Control-Allow-Origin 不允许 Origin null。

经过一番挖掘，我发现它可能是 chrome 的问题，你可能需要运行它

chrome.exe --allow-file-access-from-file

您可能还需要定义变量“内容”（对于 chrome），例如：

$(document).ready(function(){
    content = $(this).html();
    $.getJSON("data.json",function(data){
        $.each(data.locations, function(i,location){
                content += '<p>' + location.title + '</p>';
                content += '<p>' + location.latitude + '</p>';
                content += '<p' + location.longitude + '</p>';
                content += '<br/>';
               alert('aler called');
             $(content).appendTo("#loc");
        });
    });   
});

这样它适用于 Chrome 和 Firefox（在我的电脑上）。总结一下：Chrome似乎有问题，应该在外部服务器上工作。

Chrome 问题链接

于 2012-08-14T17:24:31.550 回答