使用JQuery從JSON文件獲取數據
[英]Use JQuery to get data from JSON file
問題描述
溢出！
我目前正在處理一個小應用程序，我必須在星期一上學。 我沒有太多時間來做大事情。 所以我決定，為什么不檢索Steam的Web Api的信息並獲取玩家的統計信息。
Steam api的網址： http : //api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/? appid= 730& key= DA697BB2D106697D5F8AC7E7A2BFAC52& steamid= 76561198263871727
最后一個參數&steamid=代表玩家的ID。 現在，我已經找到了如何將Steamid轉換為變量，但是當嘗試將ID添加到其余網址時（ http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid = id should be here並使用Ajax.getJson方法獲取數據。。這根本行不通..我對JSON btw非常有經驗。.有人可以幫我這個忙嗎？
我的網頁：
<!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文件。就像它具有不同的層（如果這是一個很好的解釋）。
提前致謝！
2 個解決方案
解決方案1
1 已采納 2016-01-16 14:03:17
像這樣使用jsonP：
$.ajax({
url: url,
dataType: 'JSONP',
type: 'GET',
jsonp: 'jsonp',
success: handler
});
這里的工作示例
解決方案2
1 2016-01-16 14:08:23
我不確定第一部分。 它給了我一個錯誤，在谷歌搜索后導致我“請求資源上沒有'Access-Control-Allow-Origin'標頭” ，建議使用CORS 。 錯誤：
XMLHttpRequest無法加載http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=&76561198263871727 。 所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問原始“空”。 響應的HTTP狀態碼為400。
一旦有了JSON，它就會變得更加容易。 如果它是字符串，則可以將其轉換為javascript對象
steamObject = JSON.parse(steamJsonData);
然后像普通的javascript對象一樣瀏覽它。 通過for循環遍歷playerstats.stats [i]，您可以使用常規DOM操作將數據添加到頁面中。
如何使用jQuery從php文件中的json_encode數據獲取數據？
[英]How to use jQuery to get data from a json_encode data in the php file?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.