非常简单的getJSON不工作

Question

我没有找到正确的答案，因为所有相关问题都在示例中使用了外部资源。

我有一个非常简单的 getJSON 调用（在一个简单的文件中）：

<!DOCTYPE html>
<head>
  <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    $(document).ready(function() {
      var button = $('button');
      var weatherList = $('.weather');
      button.on('click', function() {
        $.getJSON('weather.json', function(result) {
          var elemList = $.map(result, function(city, index) {
          var listItem = $('<li></li>');
          $('<p>' + city.name + '</p>').appendTo(listItem);
          $('<p>' + city.temp + '</p>').appendTo(listItem);
          console.log('item')
          return listItem;
        });
        weatherList.html(elemList);
      });
    });
  });
</script>
<title>JqApp</title>
</head>
<body>
  <p id="test">This paragraph is here for testing!</p>
  <button>fetch</button>
  <ul class="weather">
  </ul>
 </body>
 </html>

JSON:

[
  {
    name: 'Prague',
    temp: '23'
  },
  {
    name: 'Hannover',
    temp: '34'
  }
]

我真的想不出问题出在哪里。我已经通过 Sinatra 和 Harp 服务器对其进行了测试。没有任何帮助。浏览器显示 JSON loading successful JSON loading 但页面中不会显示（有可能看到 JSON Object loaded successfully）。一旦我将 weatherList.html(elemList); 向下移动，在 JSON 调用之外，就可以写入页面，但是，当然，在调用之外无法访问 elemList 所以那时它不起作用。有趣的是 console.log('item') 也不起作用。

此处为实时示例：demo

Answer 1

这是因为您的 json 被篡改了。根据 jquery ，如果 json 文件有语法错误，则请求将无声地失败 。

使用服务器端函数创建 json 数据。

截至目前，您的服务器正在响应

{↵ name: 'Prague',↵ temp: '23'↵},↵{↵ name: 'Hannover',↵ temp: '34'↵}↵

有语法错误。

来自 jQuery Docs

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see http://json.org/.

Answer 2

感谢指点！我已经通过添加引号解决了这个问题：

[
  {
    "name": "Prague",
    "temp": "23"
  },
  {
    "name": "Hannover",
    "temp": "34"
  }
]

效果很好。

非常简单的getJSON不工作

very simple getJSON not working

jquery

json

getjson