我正在尝试使用 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 时也会出现错误。这是:
它说:未捕获的语法错误:意外的标记:
最佳答案
编辑
由于跨域源安全性，您将无法从对 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/