如何从链接获取JSON数据并将其解析为HTML

Question

这里是我的pen，在这里我必须对此link发出请求，检索数据，将其放入JavaScript并显示在页面上，但是我的请求产生了一个空响应。可能出什么问题了，我该怎么做呢？

    // Get the modal element

var modal = document.getElementById('simpleModal');

var modalBtn = document.getElementById('modalBtn');

var closeBtn = document.getElementById('closeBtn');

modalBtn.addEventListener('click', openModal);

var requestResultData;

// Listen for a close click
closeBtn.addEventListener('click', closeModal);

//Outside click
window.addEventListener('click', clickOutside);

// Function 

function openModal() {
  modal.style.display = 'block';
  dataRequest();
}

function dataRequest () {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4){
         console.log(xhr);
      }
  };
  xhr.open('GET','http://www.omdbapi.com/?i=tt5687270&apikey=480344f1');
  xhr.send();
}

// function to close modal

function closeModal() {
  modal.style.display = 'none';
}

// Function for an outside click


function clickOutside(e) {

  if(e.target == modal) {
      modal.style.display = 'none';
  }

}

Answer 1

您可以使用获取api

fetch("https://yourwebsite.com/data.json")
.then(res=>res.json())
.then(res=>{
//do something with the data here
console.log(res);
});

有关获取API here的更多信息>