從API加載數據onclick

我正在嘗試製作簡單的應用程序。我想在屏幕上顯示引號，並使用api來獲取它們。我正在使用獲取來獲取API數據。從API加載數據onclick

現在一切工作正常，當窗口加載，但我想讓按鈕得到新的報價，每次有人點擊該按鈕，我不能得到它的工作。

這是我的原代碼：

fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=', { 
    cache: "no-cache" 
}) 
    .then(response => response.json()) 
    .then(function(data) { 
    console.log(data); 

    data.filter(key => { 

     let quote = document.getElementById('quote'); 
     let author = document.getElementById('author'); 

     quote.innerHTML = key.content; 
     author.innerHTML = key.title; 

    }); 

    }) 
    .catch(function(error) { 
    // If there is any error you will catch them here 
    console.log(error); 
    });

爲了使報價負載上點擊我曾嘗試以下操作：

const newQuote = document.getElementById('newQuote') 
newQuote.addEventListener('click', _ => { 
    fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=', { 
    mode: 'no-cors' 
    }) 
    .then(response => response.json()) 
    .then(data => { 
     data.filter(key => { 
      let quote = document.getElementById('quote') 
      quote.innerHTML = key.content 
     }) 
    }) 
    .catch(err => console.error(err)) 
})

所以你們可以我使其與click事件工作嗎？這裏是JSBin所以你可以更好地理解我的問題： https://jsbin.com/qidudat/edit?html,js,output

來源

2017-07-27 Zvezdas1989

也許寫回調不胖箭頭，你可能會失去的'this' – HolyMoly

@HolyMoly試了一下沒有工作的範圍。 – Zvezdas1989

好吧，所以讓我們調試...當你的console.log API響應，你看到引號？你是否證實你的HTML元素被'document.getElementById（'newQuote'）'正確捕獲？爲什麼你在API的url之前有'//'，而不是'http：//'或者什麼的？你有console.log'd'data'嗎？ – HolyMoly

我改變了，我可能會解決這個問題。其中一個問題是使用了非Cors模式。

這裏是任何有興趣的解決方案：

function getQuote() { 
    fetch("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + Math.random()) 
    .then(response => response.json()) 
    .then(function(data) { 
     console.log(data); 

     data.filter(key => { 

     let quote = document.querySelector(".quote"); 
     let author = document.querySelector(".author"); 
     let cleanQuote = key.content.replace(/<\/?p[^>]*>/g, ''); // This way we remove <p> tag from quote (api has quotes with p tags) 

     let share = 'https://twitter.com/home?status=' + cleanQuote + ' Author: ' + key.title; 
     console.log(share) 

     quote.innerHTML = key.content; 
     author.innerHTML = key.title; 

     document.getElementById('twitterShare').href=share; 
     }); 

    }) 
    .catch(function(error) { 
     // If there is any error you will catch them here 
     console.log(error); 
    }); 
} 

const newQuote = document.getElementById('newQuote') 
newQuote.addEventListener('click', getQuote); // new quote on button click 
window.onload = getQuote; // new quote on page load

來源

2017-07-28 10:59:20 Zvezdas1989

當你在新代碼中使用fetch API調用時關閉緩存....我認爲應該這樣做。

來源

2017-07-27 15:41:12 AliF50

我試過它不起作用。 – Zvezdas1989

https://jsbin.com/pihokojiqi/edit?html,js,console,output 我用jQuery的$ .ajax調用進行調用，並且它工作。它看起來像API不喜歡抓取.....我已經附加了jsbin哪個console.logs每次你點擊一個新的報價按鈕。祝你好運。我不知道爲什麼抓取沒有工作.... – AliF50

我真的想解決這個不使用JQ，我終於做到了。感謝您的幫助 – Zvezdas1989

從API加載數據onclick

回答

相關問題