[英]Using a JSON script in HTML and show data
這是指向JSON的鏈接。 http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json
該JSON文件提供有關天氣的數據
我想顯示以上鏈接中給出的數據到我的HTML文件中。 我是第一次使用JSON。 因此，我需要幫助將此JSON文件鏈接到我的HTML文檔中。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>
<body>
<div class="wrapper">
<span id="temp"></span>
<span id="high"></span>
<span id="low"></span>
<span id="windspeed"></span>
<span id="description"></span>
<span id="city"></span>
<span id="iconorimage"></span>
<span id="time"></span>
<span id="any thing else"></span>
</div>
</body>
</html>
我可以，如果我只能顯示溫度，城市，天氣圖標[雨，晴天]，有關天氣，高/低，風速和時間的文字說明。
您可以訪問json對象，類似於訪問javascript中的object屬性的方式。
$.ajax({ dataType: "json", url:"//api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", success: function(data){ $('#city').text("City : " + data["current_observation"]["display_location"]["city"]); $('#high').text("High : " + "");//Insert data for high here $('#low').text("Low : " +""); //Insert data for low here $('#temp').text("Tempearature : " + data["current_observation"]["temperature_string"]); $('#description').text("Description : " + data["current_observation"]["icon"]); $('<img />').attr('src',data["current_observation"]["icon_url"]).appendTo($("#iconorimage")); $('#windspeed').text('WindSpeed : ' + data["current_observation"]["wind_kph"]); $('#time').text('Time : ' + data["current_observation"]["observation_time"]); } });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="wrapper"> <span id="temp"></span><br/> <span id="high"></span><br/> <span id="low"></span><br/> <span id="windspeed"></span><br/> <span id="description"></span><br/> <span id="city"></span><br/> <span id="iconorimage"></span><br/> <span id="time"></span><br/> <span id="any thing else"></span><br/> </div> </body> </html>
您可以使用Ajax加載數據。
參見示例
function getJson(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(JSON.parse(this.responseText));
}
};
xhttp.open("GET", "http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", true);
xhttp.send();
}
getJson();
它將返回JSON解碼的數據。
試試這個，可能對您有幫助
jsFiddle用於相同的https://jsfiddle.net/sd0zc43j/3/
使用下面的ajax調用
$.ajax({
dataType: "json",
url:"//api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json",
success: function(data){
$('#city').html("City : " + data["current_observation"]["display_location"]["city"]);
$('#high').html("High Fahrenheit: " + data["forecast"]["simpleforecast"]["forecastday"][0]["high"]["fahrenheit"] + " & Celsius: " + data["forecast"]["simpleforecast"]["forecastday"][0]["high"]["celsius"]);
$('#low').html("Low Fahrenheit: " + data["forecast"]["simpleforecast"]["forecastday"][0]["low"]["fahrenheit"] + " & Celsius: " + data["forecast"]["simpleforecast"]["forecastday"][0]["low"]["celsius"]);
$('#temp').html("Tempearature : " + data["current_observation"]["temperature_string"]);
$('#windspeed').html("Wind Speed : " + data["current_observation"]["wind_string"]);
$('#description').html("Description : " + data["current_observation"]["icon"]);
// $('#iconorimage').html("Icon URL : " + data["current_observation"]["icon_url"]);
$('#img').attr("src",data["current_observation"]["icon_url"]);
}
});
我並不是說要光顧，但我認為您要尋找的字詞已經解析。
首先解析一些簡單的東西： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
JSON.parse（）方法解析一個JSON字符串，以構造該字符串描述的JavaScript值或對象。
這將有助於增強您的信心，您會很高興選擇了風景優美的路線，而不是先跳了頭。
您可以將ajax請求發送到此URL
$.ajax({url: "http://api.wunderground.com/api/c3d8a6a640832fd0/conditions/forecast/alert/q/29.9205347,73.8706849.json", success: function(result){
var data=JSON.Parse(result);
//and then you can access each of the property of json object for example
data.current_observation.observation_location.city;
//but yes you might need to loop through to access like periods in forecast
}});
讓我知道我是否指引您正確的方向嗎？ 那就是你想要的？ 如果您需要進一步說明，請告訴我。 謝謝
如何轉換 json 並顯示 html 中的所有數據？ 使用 Javascript 和 Map
[英]How to convert json and show all data in html ? using Javascript and Map
使用php文件在angularjs的html文件中未顯示Json數據
[英]Json Data are not show in html file in angularjs using php files
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.