获取 JSON 个文件

Question

我想获取 json 文件 (Steam API) 并想显示在 table 中订购的文件。我已经用一个按钮和一个列表试过了，但它不起作用。而且我不知道如何用 table 做到这一点。（示例：http://carl-keinath.de/json.html）

<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>

Answer 1

由于您的 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>

Answer 2

<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 加载后再执行您的脚本。

Answer 3

你的代码本身就不错！但是当你 select $("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>

获取 JSON 个文件

Fetch JSON File

javascript

jquery

json

web