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加载但它不会显示在页面中（可以看到JSON对象已成功加载）。一旦我在JSON调用之外移动weatherList.html(elemList);，就可以写入页面，但当然，在调用之外无法访问elemList因此它不起作用然后。有趣的是console.log('item')也不起作用。

此处的实时示例：demo

Answer 1

原因是你的json被篡改了。根据jquery ，如果json文件有语法错误，那么请求将无声地失败。

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

截至目前，您的服务器正在使用

进行响应

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

，它有语法错误。

来自jQuery Docs

重要提示：从jQuery 1.4开始，如果JSON文件包含语法错误，请求通常会无声地失败。避免经常手工编辑因此JSON数据。 JSON是一种数据交换格式语法规则比JavaScript的对象更严格字面符号。例如，所有以JSON表示的字符串，无论是属性还是价值，都必须附上双引号。有关JSON格式的详细信息，请参阅http://json.org/。

Answer 2

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

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

这很有效。

非常简单的getJSON无法正常工作

2 个答案: