获取JSON文件

我想获取一个json文件（Steam API）并且想要在一个表中显示排序的文件。我已经尝试了一个按钮和一个列表，但它不起作用。我不知道如何用桌子做这个。（例如：http://carl-keinath.de/json.html）获取JSON文件

<html> 
<head> 
    <title>JSON</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("button").click(function() { 
     $.getJSON("json_data.json", function(obj) { 
      $.each(obj, function(key, value) { 
       $("ul").append("<li>"+value.name+"</li>"); 
      }); 
     }); 
    });; 
</script> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 
</body> 
</html>

来源

2015-02-06 Chris P. Bacon

你的代码本身很好！但是，当您选择$("button")时，浏览器实际上还没有处理button标签，因此在该点不存在，并且click事件未注册。

解决办法有两个：

移动<script>标签到<body>标签内结束，在这种情况下<button>将由脚本解析的时间存在。

你可以保持您的<script>标记它在哪里，但在jQuery's $(document).ready()处理程序，当整个文档进行分析，准备读执行其回调函数包住整个脚本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function() { 
      $.getJSON("json_data.json", function(obj) { 
       $.each(obj, function(key, value) { 
        $("ul").append("<li>"+value.name+"</li>"); 
       }); 
      }); 
     }); 
    }); 
</script>

来源

2015-02-06 10:03:53

谢谢你man！：D – 2015-02-06 10:06:58

由于jQuery代码是在body，它应该只是之前的</body>标记，这样所有的元素都可以在DOM访问。在存在button或ul元素之前，您当前的代码正在运行。

试试这个：

<html> 
<head> 
    <title>JSON</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 

    <script type="text/javascript"> 
     $("button").click(function() { 
      $.getJSON("json_data.json", function(obj) { 
       $.each(obj, function(key, value) { 
        $("ul").append("<li>" + value.name + "</li>"); 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html>

来源

2015-02-06 09:53:25

这文档就绪函数的作用是：$（function（）{/ * DOM为所有代码加载* /}）;' – 2015-02-06 09:57:44

@northkildonan如果脚本在'head'中则适用。在body的最后，所有元素都可以在DOM中使用，所以不需要。 – 2015-02-06 10:03:20

有帮助我！你也是 – 2015-02-06 10:07:26

<html> 
<head> 
    <title>JSON</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("button").click(function() { 
     $.getJSON("json_data.json", function(obj) { 
      $.each(obj, function(key, value) { 
       $("ul").append("<li>"+value.name+"</li>"); 
      }); 
     }); 
    }); 
}); 
</script> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 
</body> 
</html>

与$(function() {包装一下你的JS - });会等到DOM被执行你的脚本之前加载。

来源

2015-02-06 09:58:50

回答

相关问题