使用 .html() 將 JSON 數據轉換為 HTML
[英]JSON data to HTML using .html()
問題描述
下面的代碼是完整的注釋。 據我了解，我正在檢索 JSON 數據並將其傳遞給 HTML 視圖中的“結果”div。 這實際上什么都不返回，並且很難調試，因為我無法向控制台輸出任何內容。
// 以下是最終 url 的外觀： // api.openweathermap.org/data/2.5/weather?q=Chicago&APPID=2e76bb25aa22d34ca062d764f4f3114b
var weatherSearch = '';
// weather-search is my html form id. On submit, send the input
// (which is city name) to the function getWeather.
$('#weather-search').submit(function(event) {
weatherSearch = $('#weatherQuery').val();
event.preventDefault();
getWeather(weatherSearch);
});
// getWeather has params q (city name), and APPID (API key).
function getWeather(weatherSearch) {
var params = {
q: weatherSearch,
APPID: '2e76bb25aa22d34ca062d764f4f3114b'
};
// This is the url that goes before the params.
url = 'http://api.openweathermap.org/data/2.5/weather/';
// Request data using url and params above.
// Does $.getJSON format the url properly?
$.getJSON(url, params, function(data) {
// Pass JSON data to showWeather function.
showWeather(data.items);
});
}
function showWeather(weather) {
// Show JSON data (weather) in html div id="weatherResults"
$('#weatherResults').html(weather);
}
這是相關的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="openweather.js"></script>
</head>
<body>
<form id="weather-search">
<input type="text" value="" id="weatherQuery" />
<input type="submit" />
</form>
<div id="weatherResults">
</div>
</body>
</html>
3 個解決方案
解決方案1
1 已采納 2016-03-25 19:44:19
此答案演示了多種請求和查看數據的方法。
下面的代碼片段使用jQuery或普通 javascript 查詢 Web 服務。 返回的數據使用JSON.stringify()和Google Prettify顯示在屏幕上。 數據也被發送到控制台。 有趣的是，當城市名稱拼寫錯誤時， OpenWeatherMap服務可以很好地猜測。
OP 代碼的問題似乎是這一行： showWeather(data.items); 它試圖將對象顯示為 html。
運行代碼片段來嘗試
var url = 'http://api.openweathermap.org/data/2.5/weather?APPID=2e76bb25aa22d34ca062d764f4f3114b'; // plain javascript version function getWeather(city) { var xhr = new XMLHttpRequest(); xhr.open('GET', url + '&q=' + city, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); showData( data ); } } xhr.send(); } // jQuery version function getWeather2( city ) { $.getJSON(url + '&q=' + city, showData ); } // display json weather data function showData( data ) { window.city.value = data.name; window.stdout.innerHTML = JSON.stringify(data, false, ' '); window.stdout.className = 'prettyprint'; PR.prettyPrint(); if (window.console) window.console.log( data ); } // sample data getWeather('Berlin');
input {border: 1px solid black;} button {width: 8em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js?autoload=false&skin=sunburst&lang=js"></script> Enter City: <input id="city" > <button onclick="getWeather(window.city.value)">Use JS</button> <button onclick="getWeather2(window.city.value)">Use jQuery</button> <pre id="stdout" class="prettyprint"></pre>
解決方案2
0 2016-03-25 17:43:04
您可以使用 console.log 或 dom 打印用於調試的消息。 您可以運行這樣的回調來確定請求是否失敗，這會告訴您更多信息：
$.getJSON(url, params, function(data) {
// Pass JSON data to showWeather function.
showWeather(data.items);
}).fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});
解決方案3
0 2016-03-25 19:12:59
直接在瀏覽器中使用完整的 URL ( http://api.openweathermap.org/data/2.5/weather/?q=Chicago&APPID=2e76bb25aa22d34ca062d764f4f3114b ) 會返回一些 JSON 和有關芝加哥的數據——但該 JSON不包含項目屬性. 因此，您的 data.items 為空，並且沒有顯示任何內容。
只需檢查您從瀏覽器實際獲得的內容並相應地采用您的代碼（例如 data.name 會給您“Chicago”，或者簡單地使用showWeather(data);來顯示您獲得的所有 JSON）。
使用AJAX將JSON數據轉換為HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.