使用 JQuery 从 JSON 文件中获取数据

Use JQuery to get data from JSON file

本文关键字：获取 数据 文件 JSON JQuery 使用      更新时间：2023-09-26

溢出！

我

目前正在处理一个小应用程序，我必须在周一完成上学。我没有太多时间做大事。所以我决定，为什么不检索Steam的Web API的信息并获取玩家的统计数据。

蒸汽 API 的网址：http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=76561198263871727

最后一个参数 &steamid= 表示玩家的 id。现在我已经找到了如何将 steamid 放入变量中，但是当尝试将 id 添加到 url 的其余部分时（http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid= id should be here并使用 Ajax.getJson 方法获取数据时。它只是不起作用..顺便说一句，我对 JSON 非常有经验。有人可以帮助我解决这个问题吗？

我的网页：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Meta Information-->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--JQuery Mobile-->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <!--FontAwesome-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!--Custom Styles-->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h1>CS:GO Stats</h1>    
            </div>
            <div data-role="main" class="ui-content">
                <div class="search">
                    <label for="search">Enter SteamID:</label>
                    <input type="search" name="search" id="inputSearch" />
                    <input type="submit" id="butSearch" data-inline="true" value="Search SteamID">
                </div>
                <div id="result">
                </div>
            </div>    
        </div>
        <!--getSteamUserId function-->
        <script src="js/getSteamUserId.js"></script>
    </body>
</html>

我的Javascript代码：

$(document).ready(function() {
    $('#butSearch').click(function(event) {
        var input = $('#inputSearch').val();
        $.getJSON( "http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=" + input, function( data ) {
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
            });
            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "#result" );
        });
    })
})

现在我想要的是将 JSON 文件中的统计信息数据获取到我的网页中。有人知道怎么做吗？我还可以看到JSON不仅仅是一个平面的JSON文件。就像它有不同的层（如果这是一个很好的解释）。

提前感谢！

像下面这样使用 jsonP：

$.ajax({
  url: url,
  dataType: 'JSONP',
  type: 'GET',
  jsonp: 'jsonp',
  success: handler
});

这里的工作示例

我不完全确定第一部分。它给了我一个错误，在谷歌搜索后导致我"请求的资源上不存在'访问控制-允许来源'标头"，建议使用 CORS。错误：

XMLHttpRequest 无法加载 http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=&76561198263871727。请求的资源上不存在"访问控制允许源"标头。因此，不允许访问源"空"。响应具有 HTTP 状态代码 400。

一旦你有了JSON，它就更容易了。如果它是字符串化的，你可以用 

steamObject = JSON.parse(steamJsonData);

然后像普通的JavaScript对象一样浏览它。使用 for 循环循环浏览 playerstats.stats[i]，您可以使用正常的 DOM 操作将数据添加到您的页面。

相关文章：