[英]Cannot get obj property to show up on html page when called (from json php file) in ajax
無法將其提升到一個新的水平,請幫助。 I am trying to get the temperature to print out as well right below the description on the html page using DOM and ajax which is pulling the data from a php file which storing it json format. 不知道錯誤在哪里,或者我是否遺漏了什么。 我知道我犯了一個錯誤,因為我可以執行 console.log 並查看數據,但無法弄清楚如何將“temp”及其屬性獲取到 html。非常感謝任何幫助或指針。 謝謝大家!
-----------html-------------------
<body>
<h1 class="title">Todays Weather Forecast</h1>
<p class="sub">Click the button the check the local weather.</p>
<button class="demo-centered" type="button" onclick="loadPhp()">Check Weather</button><br><br>
<div id="content"></p>
<div id="content2"></p>
</body>
---------------javascript file ---------------------------------------------
function loadPhp() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
var responseObject = JSON.parse(xhr.responseText);
var newContent = '';
var newContent2 = '';
for (var i = 0; i < responseObject.weather.length; i++) {
newContent += responseObject.weather[i].description;
}
for (var x in responseObject.main){
console.log(x + ':' +responseObject.main[x]);
}
document.getElementById('content').innerHTML = "Description: " + newContent;
document.getElementById('content2').innerHTML = "Temperature: " +response.Object.main[x];
}
};
xhr.open('GET', 'demo.php', true);
xhr.send(null);
}
}
----------------PHP file---------------------
{
"coord": {
"lon": -116.8,
"lat": 33.03
},
"weather": [{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}],
"base": "stations",
"main": {
"temp": 293.73,
"feels_like": 289.89,
"temp_min": 289.26,
"temp_max": 295.93,
"pressure": 1016,
"humidity": 52
},
"visibility": 16093,
"wind": {
"speed": 5.7,
"deg": 260
},
"clouds": {
"all": 40
},
"dt": 1589408840,
"sys": {
"type": 1,
"id": 5686,
"country": "US",
"sunrise": 1589374130,
"sunset": 1589423903
},
"timezone": -25200,
"id": 5391832,
"name": "San Diego County",
"cod": 200
}
您的代碼中有 2 個錯誤,首先是response.Object.main[x]..
這應該是responseObject.main[x]
附近有錯字。另外,您還沒有關閉</div>
你已經使用了</p>
.
工作代碼:
var responseObject = { "coord": { "lon": -116.8, "lat": 33.03 }, "weather": [{ "id": 802, "main": "Clouds", "description": "scattered clouds", "icon": "03d" }], "base": "stations", "main": { "temp": 293.73, "feels_like": 289.89, "temp_min": 289.26, "temp_max": 295.93, "pressure": 1016, "humidity": 52 }, "visibility": 16093, "wind": { "speed": 5.7, "deg": 260 }, "clouds": { "all": 40 }, "dt": 1589408840, "sys": { "type": 1, "id": 5686, "country": "US", "sunrise": 1589374130, "sunset": 1589423903 }, "timezone": -25200, "id": 5391832, "name": "San Diego County", "cod": 200 }; var newContent = ''; var newContent2 = ''; for (var i = 0; i < responseObject.weather.length; i++) { newContent += responseObject.weather[i].description; } for (var x in responseObject.main) { //console.log(x + ':' + responseObject.main[x]); } document.getElementById('content').innerHTML = "Description: " + newContent; document.getElementById('content2').innerHTML = "Temperature: " + responseObject.main[x];//change here
<div id="content"> </div> <!--close div--> <div id="content2"> </div> <!--close div-->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.