Javascript 获取JSON文件_Javascript_Jquery_Json_Web

Javascript 获取JSON文件

javascript jquery json web

Javascript 获取JSON文件,javascript,jquery,json,web,Javascript,Jquery,Json,Web,我想获取一个json文件（Steam API），并想在表中显示排序的文件。我试过用一个按钮和一个列表，但它不起作用。我不知道怎么用桌子做这个。（例如：） JSON $（“按钮”）。单击（函数（）{ $.getJSON（“json_data.json”，函数（obj）{ $.each（对象，函数（键，值）{ $（“ul”）。追加（“”+value.name+””； }); }); });; 刷新由于jQuery代码位于主体中，因此它应该位于标记之前，以便可以在DOM中访问所有元素。当前代码在

我想获取一个json文件（Steam API），并想在表中显示排序的文件。我试过用一个按钮和一个列表，但它不起作用。我不知道怎么用桌子做这个。（例如：）


JSON
$（“按钮”）。单击（函数（）{
$.getJSON（“json_data.json”，函数（obj）{
$.each（对象，函数（键，值）{
$（“ul”）。追加（“”+value.name+””；
});
});
});;

刷新

由于jQuery代码位于

主体中，因此它应该位于
标记之前，以便可以在DOM中访问所有元素。当前代码在按钮
或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>


JSON

刷新
$（“按钮”）。单击（函数（）{
$.getJSON（“json_data.json”，函数（obj）{
$.each（对象，函数（键，值）{
$（“ul”）。追加（“”+value.name+””；
});
});
});

JSON
$（函数（）{
$（“按钮”）。单击（函数（）{
$.getJSON（“json_data.json”，函数（obj）{
$.each（对象，函数（键，值）{
$（“ul”）。追加（“”+value.name+””；
});
});
});
});

刷新

用$（function（）{
-}）包装JS将等待DOM加载后再执行脚本。
您的代码本身很好！但是，当您选择$（“按钮”）
时，浏览器实际上还没有处理按钮
标记本身，因此此时它不存在，并且单击
事件未注册
有两种解决方案：
将
标记移动到
标记内的末端，在这种情况下，解析脚本时将存在

您可以将
标记保留在原处，但将整个脚本包装在处理程序中，处理程序在解析整个文档并准备阅读时执行其回调函数：
<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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.getJSON（“json_data.json”，函数（obj）{
$.each（对象，函数（键，值）{
$（“ul”）。追加（“”+value.name+””；
});
});
});
});

这就是documentready函数的用途：$（function（）{/*DOM为此处的所有代码加载*/}）
@northkildonan，如果脚本位于头部中，则适用该脚本。在正文的末尾，DOM中的所有元素都是可用的，因此不需要它。@RoryMcCrossan啊，是的。只是看到他脑袋里根本没有这个。
<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>

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