javascript - 使用 Jquery (ajax) 显示来自 Steam Dota 2 API JSON 的数据

转载作者：行者123 更新时间：2023-12-03 09:45:50

我正在尝试使用 jquery ajax 显示从 Steam Dota2 Api 获得的数据。总的来说，我对 jquery 和 javascript 还很陌生，请耐心等待。

这是我当前的代码:

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>MEDIAN</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="bro"></div>
<script>
$.ajax({ url:"https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=[MUH_KEY]&account_id=[MUH_STEAMID]",
         dataType:"jsonp",
         success:function(data) {
           $.each(data.matches, function(i,value){
                  $.each(this, function() {
                      $.each(this, function() {
                          $('#bro').append(''+this.match_id+' '+this.match_seq_num+' '+this.start_time+' '+this.lobby_type+' '+this.radiant_team_id+' '+this.dire_team_id);
                      });
                  });
           });
         }
});
</script>
</body>
</html>

这是 JSON，对我来说很难理解这个嵌套数组 (cmiiw) 并通过 jquery 显示它。这不是整个 json，因为它太长了。

{
    "result": {
        "status": 1,
        "num_results": 100,
        "total_results": 500,
        "results_remaining": 400,
        "matches": [
            {
                "match_id": 1577193573,
                "match_seq_num": 1411082036,
                "start_time": 1435073740,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 4294967295,
                        "player_slot": 0,
                        "hero_id": 97
                    },
                    {
                        "account_id": 113922244,
                        "player_slot": 1,
                        "hero_id": 49
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 2,
                        "hero_id": 83
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 3,
                        "hero_id": 40
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 4,
                        "hero_id": 19
                    },
                    {
                        "account_id": 84884311,
                        "player_slot": 128,
                        "hero_id": 77
                    },
                    {
                        "account_id": 101673984,
                        "player_slot": 129,
                        "hero_id": 21
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 130,
                        "hero_id": 16
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 131,
                        "hero_id": 46
                    },
                    {
                        "account_id": 120135659,
                        "player_slot": 132,
                        "hero_id": 74
                    }
                ]

            },
            {
                "match_id": 1577051324,
                "match_seq_num": 1410978056,
                "start_time": 1435070603,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 4294967295,
                        "player_slot": 0,
                        "hero_id": 43
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 1,
                        "hero_id": 12
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 2,
                        "hero_id": 9
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 3,
                        "hero_id": 19
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 4,
                        "hero_id": 30
                    },
                    {
                        "account_id": 196130407,
                        "player_slot": 128,
                        "hero_id": 18
                    },
                    {
                        "account_id": 84884311,
                        "player_slot": 129,
                        "hero_id": 39
                    },
                    {
                        "account_id": 101673984,
                        "player_slot": 130,
                        "hero_id": 23
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 131,
                        "hero_id": 2
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 132,
                        "hero_id": 60
                    }
                ]

            },
            {
                "match_id": 1574412512,
                "match_seq_num": 1408948467,
                "start_time": 1434985184,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 37914001,
                        "player_slot": 0,
                        "hero_id": 34
                    },
                    {
                        "account_id": 30219675,
                        "player_slot": 1,
                        "hero_id": 25
                    },
                    {
                        "account_id": 84884311,
                        "player_slot": 2,
                        "hero_id": 62
                    },
                    {
                        "account_id": 101673984,
                        "player_slot": 3,
                        "hero_id": 93
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 4,
                        "hero_id": 2
                    },
                    {
                        "account_id": 100475325,
                        "player_slot": 128,
                        "hero_id": 4
                    },
                    {
                        "account_id": 102345123,
                        "player_slot": 129,
                        "hero_id": 22
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 130,
                        "hero_id": 52
                    },
                    {
                        "account_id": 112187078,
                        "player_slot": 131,
                        "hero_id": 13
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 132,
                        "hero_id": 97
                    }
                ]

            },
            {
                "match_id": 1571382630,
                "match_seq_num": 1406558738,
                "start_time": 1434895885,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 4294967295,
                        "player_slot": 0,
                        "hero_id": 44
                    },
                    {
                        "account_id": 197159693,
                        "player_slot": 1,
                        "hero_id": 95
                    },
                    {
                        "account_id": 231158000,
                        "player_slot": 2,
                        "hero_id": 75
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 3,
                        "hero_id": 57
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 4,
                        "hero_id": 26
                    },
                    {
                        "account_id": 198610762,
                        "player_slot": 128,
                        "hero_id": 8
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 129,
                        "hero_id": 31
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 130,
                        "hero_id": 58
                    },
                    {
                        "account_id": 84884311,
                        "player_slot": 131,
                        "hero_id": 17
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 132,
                        "hero_id": 18
                    }
                ]

            },
            {
                "match_id": 1562422288,
                "match_seq_num": 1399749958,
                "start_time": 1434643670,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 4294967295,
                        "player_slot": 0,
                        "hero_id": 14
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 1,
                        "hero_id": 39
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 2,
                        "hero_id": 74
                    },
                    {
                        "account_id": 135094180,
                        "player_slot": 3,
                        "hero_id": 71
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 4,
                        "hero_id": 26
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 128,
                        "hero_id": 82
                    },
                    {
                        "account_id": 176933908,
                        "player_slot": 129,
                        "hero_id": 35
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 130,
                        "hero_id": 84
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 131,
                        "hero_id": 86
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 132,
                        "hero_id": 43
                    }
                ]

            },
            {
                "match_id": 1550411362,
                "match_seq_num": 1389413408,
                "start_time": 1434223325,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 4294967295,
                        "player_slot": 0,
                        "hero_id": 100
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 1,
                        "hero_id": 27
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 2,
                        "hero_id": 22
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 3,
                        "hero_id": 72
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 4,
                        "hero_id": 88
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 128,
                        "hero_id": 19
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 129,
                        "hero_id": 60
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 130,
                        "hero_id": 47
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 131,
                        "hero_id": 101
                    },
                    {
                        "account_id": 71037623,
                        "player_slot": 132,
                        "hero_id": 34
                    }
                ]

            },
            {
                "match_id": 1550116146,
                "match_seq_num": 1389164026,
                "start_time": 1434214249,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 100783247,
                        "player_slot": 0,
                        "hero_id": 110
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 1,
                        "hero_id": 44
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 2,
                        "hero_id": 63
                    },
                    {
                        "account_id": 98612564,
                        "player_slot": 3,
                        "hero_id": 69
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 4,
                        "hero_id": 21
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 128,
                        "hero_id": 5
                    },
                    {
                        "account_id": 151175026,
                        "player_slot": 129,
                        "hero_id": 11
                    },
                    {
                        "account_id": 125128397,
                        "player_slot": 130,
                        "hero_id": 36
                    },
                    {
                        "account_id": 168588757,
                        "player_slot": 131,
                        "hero_id": 84
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 132,
                        "hero_id": 4
                    }
                ]

            },
            {
                "match_id": 1550018804,
                "match_seq_num": 1389030960,
                "start_time": 1434211724,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 127632092,
                        "player_slot": 0,
                        "hero_id": 27
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 1,
                        "hero_id": 14
                    },
                    {
                        "account_id": 124189864,
                        "player_slot": 2,
                        "hero_id": 12
                    },
                    {
                        "account_id": 123645856,
                        "player_slot": 3,
                        "hero_id": 46
                    },
                    {
                        "account_id": 122643576,
                        "player_slot": 4,
                        "hero_id": 7
                    },
                    {
                        "account_id": 122142430,
                        "player_slot": 128,
                        "hero_id": 29
                    },
                    {
                        "account_id": 100783247,
                        "player_slot": 129,
                        "hero_id": 94
                    },
                    {
                        "account_id": 4294967295,
                        "player_slot": 130,
                        "hero_id": 20
                    },
                    {
                        "account_id": 58768092,
                        "player_slot": 131,
                        "hero_id": 60
                    },
                    {
                        "account_id": 98612564,
                        "player_slot": 132,
                        "hero_id": 2
                    }
                ]

            },
            {
                "match_id": 1544605676,
                "match_seq_num": 1384279773,
                "start_time": 1434031817,
                "lobby_type": 0,
                "radiant_team_id": 0,
                "dire_team_id": 0,
                "players": [
                    {
                        "account_id": 84884311,
                        "player_slot": 0,
                        "hero_id": 89
                    },

请原谅我的英语和编程技巧，我卡住了。谢谢。

编辑 1

当我将数据类型更改为 JSON 而不是 JSONP 时，它会在我的 chrome 中显示错误:

XMLHttpRequest cannot load https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=KEY&account_id=ID. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://bool.hol.es' is therefore not allowed access.

搜了一下SO，是跨平台的问题，所以改成了JSONP。

但是使用 JSONP 时也会出现错误。这是:

/image/kvcxg.png

它说:未捕获的语法错误:意外的标记:

最佳答案

编辑

由于跨域源安全性，您将无法从对 Steam DOTA2 API 的 AJAX 请求中获取任何数据。通常，浏览器不允许来自不同域的 HTML 页面访问来自另一个域的数据/AJAX 请求 - 除非服务器允许通过 CORS。您可以通过MDN了解CORS和其他堆栈溢出Q & A s。

您可以使用您一直在尝试做的 JSONP。不幸的是，Steam DOTA2 API 只允许 XML 和 JSON 请求。不是 JSONP。

现在，作为问题的解决方案，您可以通过后端代码(例如 PHP、Java 等)从 Steam 请求数据，并在 HTML 页面上公开服务来获取和呈现它们。

希望这有帮助:)

<小时/>

第一(Steam DOTA 2 响应)

让我们检查一下 Steam DOTA2 API 的 JSON 响应。为了清楚起见，这只是响应的较短版本。

var data = {
    "result":{
        "status":1,
        "num_results":100,
        "total_results":500,
        "results_remaining":400,
        "matches":[
            {
                "match_id":1577193573,
                "match_seq_num":1411082036,
                "start_time":1435073740,
                "lobby_type":0,
                "radiant_team_id":0,
                "dire_team_id":0,
                "players":[
                    {
                        "account_id":4294967295,
                        "player_slot":0,
                        "hero_id":97
                    },
                    {
                        "account_id":113922244,
                        "player_slot":1,
                        "hero_id":49
                    }
                ]
            },
            {
                "match_id":1577051324,
                "match_seq_num":1410978056,
                "start_time":1435070603,
                "lobby_type":0,
                "radiant_team_id":0,
                "dire_team_id":0,
                "players":[
                    {
                        "account_id":4294967295,
                        "player_slot":0,
                        "hero_id":43
                    },
                    {
                        "account_id":4294967295,
                        "player_slot":1,
                        "hero_id":12
                    }
                ]
            }
        ]
    }
}

你可以看到里面有很多嵌套值。因此，如果您想获取 matches 数组，可以通过 data.result.matches 访问它。每场比赛都包含一个 players 数组。

第二(使用 jQuery AJAX)

请注意，API 返回 JSON 响应而不是 JSONP。因此，您应该将 dataType : 'jsonp' 更改为 dataType: 'json'。

第三个(jQueryeach())

如果你想循环匹配，你的代码应该是这样的:

$.ajax({
    url:"https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=[MUH_KEY]&account_id=[MUH_STEAMID]",
    dataType:"json", // should be json NOT jsonp
    success:function(data) {
        // loop through the matches
        $.each(data.result.matches, function(i, value){
            $('#bro').append('<b>Match:</b> ' + match.match_id + ' ' + match.match_seq_num + ' ' + match.start_time + ' ' + match.lobby_type + ' ' + match.radiant_team_id + ' ' + match.dire_team_id + '<br>');
        });
    }
});

然后，如果您想循环播放玩家，则需要先循环播放比赛。事情是这样的:

$.ajax({
    url:"https://api.steampowered.com/IDOTA2Match_570/GetMatchHistory/V001/?key=[MUH_KEY]&account_id=[MUH_STEAMID]",
    dataType:"json", // Should be json NOT jsonp
    success:function(data) {
        // loop through the matches
        $.each(data.result.matches, function(i, match) {
        
            // loop through the players in the match
            $.each(match.players, function (j, player) {
                $('#bro').append('<b>Player:</b> ' + player.account_id + ' ' + player.player_slot + ' ' + player.hero_id + '<br>');
            });
        });
    }
});

有关详细信息，请参阅jQuery each() documentation

希望这有帮助。

关于javascript - 使用 Jquery (ajax) 显示来自 Steam Dota 2 API JSON 的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31037109/

文章推荐： javascript - Elixir如何组合$(document).ready(function(){}

文章推荐： javascript - 在单个发布商页面上提供多个广告小部件

文章推荐： javascript - AngularJS 服务不返回 promise

文章推荐： javascript - jQuery onkeyup 事件 : scan not defined

ajax - Comet, Ajax Push, Reverse Ajax
有人有 Comet 应用程序 .net 的任何样本吗？我需要一个示例如何在服务器中保持客户端的连接？最佳答案这里也有一些不错的: http://www.frozenmountain.com/we
ajax - Yii2:ajax 提交表单上的 ajax 表单验证
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。我正在处理一个促销代码输入表单，用户
ajax - Ajax 和 Jquery-Ajax 之间的区别
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
ajax - f :ajax and a4j:ajax? 和有什么区别吗
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未
ajax - 在 $.ajax() 中将数组传递给 ajax 请求
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
ajax - jQuery.ajax 和 $.ajax 是一样的吗？
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
ajax - Ajax 会降低性能吗？
过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？最佳答案过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果
ajax - 使用 Ext.Ajax.request 的跨域 Ajax
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。这是我的代码: {
ajax - AJAX 调用后的渲染问题
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情
ajax - Ajax 库的比较
任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。请注意，我不是在要求“我认为 XXX 很棒”——我正
ajax - 哪些情况下不应使用 AJAX？
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。可能是为了 UX，AJAX 向站点/
ajax - ajax 页面的永久链接最佳实践
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在我希望地址栏始终包含当前(自定义) V
ajax - 我是否正确理解了 Ajax？
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服
ajax - AJAX 可以提交基本身份验证的凭据吗？
这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
ajax - AJAX 检查用户名功能的安全性
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
ajax - Ajax 发布后重定向
我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
ajax - Jquery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执
ajax - AJAX 请求时禁用按钮
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
ajax - RAILS 6 Ajax 事件和 Ajax Spinner
我试图在每个 Ajax 请求上显示加载动画/微调器我的 application.js $(document).on("turbolinks:load", function() { window.
ajax - ajax settimeout刷新div
我正在显示使用jQplot监视数据的图形。为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。在服务器上，PHP脚本从数据库中检索数据。成功后，将在5

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Jquery (ajax) 显示来自 Steam Dota 2 API JSON 的数据

编辑

第一(Steam DOTA 2 响应)

第二(使用 jQuery AJAX)

第三个(jQueryeach())