如何使用Ajax和JSON獲取天氣信息並將其放入HTML段落中？

所以我有一個問題，傾向於如何使用Ajax和JSON從openweathermap檢索天氣信息並將信息放入HTML頁面的段落中。如何使用Ajax和JSON獲取天氣信息並將其放入HTML段落中？

我發現了這段代碼here，它簡要地概述了我需要做的事情，但我不想要JavaScript警報，而且我似乎無法使其工作。

我的網頁目前看起來是這樣的： enter image description here

及其產生的代碼是在這裏：

<!DOCTYPE html> 
 
<html> 
 

 
<script> 
 

 
function getWeather() 
 
{ 
 
\t $(document).ready(function(){ 
 
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=02878,us",function(result){ 
 
     var message = ("Weather: "+ result.weather[0].main); 
 
     }); 
 
    }); 
 
} 
 

 

 
document.write(getWeather().message); 
 
</script> 
 

 

 
<head> 
 
<style> 
 
firstDay { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 100px; 
 
    border-radius: 25px; 
 
    background: #8AC007; 
 
    padding: 20px; 
 
    width: 300px; 
 
    height: 550px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<firstDay> <center> <u> <h1> Today </center> </u> </h1> 
 
<p> Weather here </p> 
 

 
</firstDay> 
 

 

 
</body> 
 
</html>

這將是真棒，如果你們能告訴我怎麼樣將getWeather（）函數的結果放入Today行的綠色框中。

來源

2015-06-05 ejoe23

文件爲什麼裏面的函數準備好了嗎？ – Eric

@Eric這是確保頁面呈現和元素註冊的標準。否則，可能會發生AJAX請求在頁面可用於與 –

交互之前完成。我的問題是與我的聲明的「內部」部分。如果你使用jQuery，爲什麼還要使用document.write？ – Eric

jQuery的append()是你的朋友：http://api.jquery.com/append/

而不是document.write()，只是這樣做：

$(document).ready(function(){ 
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=02878,us",function(result){ 
     var message = ("Weather: "+ result.weather[0].main); 
     $('firstDay h1').append(message); 
     }); 
    });

來源

2015-06-05 02:44:53

我將你的功能添加到我的代碼中。唯一的問題是天氣沒有被寫入。我不認爲這是你的代碼的問題，而是可能是因爲我沒有在HTML中的任何地方調用該函數？我對JavaScript很陌生，並且不知道如何很好地實現到HTML。任何幫助，將不勝感激。（我的代碼與我提出問題時的代碼相同，我只是用您的代碼替換了getWeather函數） – ejoe23

您需要首先獲取jQuery。將''添加到您的HTML代碼中。 – therewillbecoffee

此外，我昨晚沒有清楚地思考 - 而不是定義函數，你可以在頁面加載時運行匿名函數 - 我已經更新了我的答案以反映這一點 –

問題是範圍界定。在回調內移動.write()：

var message = ("Weather: "+ result.weather[0].main); 
document.write(message);

一旦Ajax回調異步返回。那是當你有數據寫入DOM時。

來源

2015-06-05 02:43:41 beautifulcoder

如何使用Ajax和JSON獲取天氣信息並將其放入HTML段落中？

回答

相關問題