时间戳

首页 > 解决方案 > 在 ajax 中调用（来自 json php 文件）时，无法获取 obj 属性以显示在 html 页面上

javascript - 在 ajax 中调用（来自 json php 文件）时，无法获取 obj 属性以显示在 html 页面上

问题描述

无法将其提升到一个新的水平，请帮助！我正在尝试使用 DOM 和 ajax 从 php 文件中提取数据，并在 html 页面上的描述下方打印出温度，该文件存储 json 格式。不知道错误在哪里，或者我是否遗漏了什么。我知道我犯了一个错误，因为我可以执行 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
}

标签： javascriptphphtmlajax

解决方案

您的代码中首先有 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-->

推荐阅读