Here is my pen and there I have to make a request to this link , retrieve the data, put it into JavaScript and show on a page, but my request yields an empty response. What might be wrong and how can I do it better?
// 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';
}
}
You can use the fetch api
fetch("https://yourwebsite.com/data.json")
.then(res=>res.json())
.then(res=>{
//do something with the data here
console.log(res);
});
More about the fetch api here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.