您知道如何用来自API的图片填充DOM吗

时间:2019-07-02 16:24:27

标签: javascript api dom addeventlistener

我正在尝试从后端服务器获取图像,并在其中填充DOM,以便它们自动显示

这是一项家庭作业,我只是在学习DOM,API,GET请求等。我有一些在线教师使用的代码,但没有如何修改它以完成我想要的事情。我已经包括了他使用的示例

// Access DOM elements
const reportSection = document.getElementById('weather-report');
const cityForm = document.getElementById('city-form');
const cityInput = document.getElementById('city');

// Prepare openweathermap.org request
let apiRequest = new XMLHttpRequest();

/* 
 * Capture and handle form submit event
 * Prevent default behaviour, prepare and send API request
*/
cityForm.addEventListener('submit', ($event) => {
  $event.preventDefault();
  const chosenCity = cityInput.value;
  apiRequest.open('GET', 
'https://api.openweathermap.org/data/2.5/weather?q=' + chosenCity 
+ '&APPID=b34fddd3dae4a2eb0ad363b62f98ba1e');
  apiRequest.send();
});

  apiRequest.onreadystatechange = () => {
    if (apiRequest.readyState === 4) {
      if (apiRequest.status === 404) {
          return reportSection.textContent = 'City not found';
          }
      const response = JSON.parse(apiRequest.response); 
      reportSection.textContent = 'The weather in ' + 
response.name + ' is ' + response.weather[0].main + '.';
    }
  };

我不知道如何使用作为本地服务器运行的API URL(http://localhost:3000/api/cameras/)来填充我制作的网页。我知道这是一个简单的问题,但我只需要一些帮助就可以解决我的问题

0 个答案:

没有答案