簡體   English   中英

在 Z2705A83A83A5A0637EDA57426 中調用(來自 json php 文件)時,無法獲取 obj 屬性以顯示在 html 頁面上

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM