使用 Jquery (ajax) 显示来自 Steam Dota 2 API JSON 的数据
Showing data from Steam Dota 2 API JSON using Jquery (ajax)
我正在尝试使用 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 也有一个错误。在这里:
http://i.imgur.com/CGWT09j.png
它说:未捕获的语法错误:意外的标记:
编辑
由于 cross-domain
来源安全,您将无法从 AJAX 向 Steam DOTA2 API 的请求中获取任何数据。通常,浏览器不会允许来自不同域的 HTML 页面访问来自另一个域的 data/AJAX 请求 - 除非服务器允许它通过 CORS。您可以通过 MDN and other Stack Overflow Q&As 阅读 CORS。
您可以使用您一直尝试做的 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 returns 一个 JSON 响应 不是 JSONP。所以你应该把 dataType : 'jsonp'
改成 dataType: 'json'
.
第三个(jQuery每个())
如果你想循环匹配,你的代码应该是这样的:
$.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>');
});
}
});
那么如果你想遍历players
,你需要先遍历matches
。是这样的:
$.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
希望这对您有所帮助。
我正在尝试使用 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 也有一个错误。在这里:
http://i.imgur.com/CGWT09j.png
它说:未捕获的语法错误:意外的标记:
编辑
由于 cross-domain
来源安全,您将无法从 AJAX 向 Steam DOTA2 API 的请求中获取任何数据。通常,浏览器不会允许来自不同域的 HTML 页面访问来自另一个域的 data/AJAX 请求 - 除非服务器允许它通过 CORS。您可以通过 MDN and other Stack Overflow Q&As 阅读 CORS。
您可以使用您一直尝试做的 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 returns 一个 JSON 响应 不是 JSONP。所以你应该把 dataType : 'jsonp'
改成 dataType: 'json'
.
第三个(jQuery每个())
如果你想循环匹配,你的代码应该是这样的:
$.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>');
});
}
});
那么如果你想遍历players
,你需要先遍历matches
。是这样的:
$.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
希望这对您有所帮助。