Question

我想获取一个json文件（Steam API），并希望显示在表中排序的文件。我用按钮和列表尝试了它，但它不起作用。而且我不知道如何用桌子做这件事。（实施例：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

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

有两种解决方案：

将<script>标记移到<body>标记内的末尾，在这种情况下，解析脚本时<button>将存在。
< / LI>

您可以将<script>标记保留在原来的位置，但将整个脚本包装在jQuery's $(document).ready()处理程序中，该处理程序在整个文档被解析并准备阅读时执行其回调函数： / p>

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

Answer 2

由于你的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 3

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

获取JSON文件

3 个答案: