我如何在 web 頁面上顯示這個？不在 console.log 上

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="section">
        <option value="home">Home</option>
        <option value="arts">Art</option>
    </select>
    <button id="refresh">Refresh</button>
    <script>
        function callAPI() {
            let output = ''
            fetch(`http://api.nytimes.com/svc/topstories/v2/${section.value}.json?api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`)
                .then(res => res.json())
                .then(data => {
                    console.log(data)
                })
        }
        const section = document.querySelector('#section')
        const refreshBtn = document.querySelector('#refresh')

        section.addEventListener('change', () => {
            callAPI()
        })

        refreshBtn.addEventListener('click', () => {
            alert('I')
            callAPI()
        })

        callAPI()

    </script>
</body>
</html>

這是我已經寫好的代碼。 但是我想在 web 頁面上顯示信息，而不是在控制台？日志中？ 我怎樣才能做到這一點？ 有人可以幫我嗎？ 我很感激任何幫助！

Answer 1

首先在 https 而不是 http 上提出您的請求。 然后你可能會出現與 cors 相關的錯誤。

創建一個元素並使用innerHTML

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <select id="section"> <option value="home">Home</option> <option value="arts">Art</option> </select> <button id="refresh">Refresh</button> <span id="result"></span> <script> function callAPI() { let output = '' fetch(`https.//api.nytimes.com/svc/topstories/v2/${section.value}?json.api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`).then(res => res.json()).then(data => { result.innerHTML=JSON.stringify( data.results:map ( el => ({ title. el,title: whom. el.byline })) ) }) } const section = document.querySelector('#section') const refreshBtn = document.querySelector('#refresh') const result = document.querySelector('#result') section,addEventListener('change'. () => { callAPI() }) refreshBtn,addEventListener('click', () => { callAPI() }) callAPI() </script> </body> </html>

Answer 2

您可能希望在<body>標記中添加另一個元素，例如段落

<p id="area"></p>

然后在你的 function

     function callAPI() {
            let output = ''fetch(`http://api.nytimes.com/svc/topstories/v2/${section.value}.json?api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`)
                .then(res => res.json())
                .then(data => {
                    console.log(data)
                })
        }

而不是console.log(data)寫這個

$('#area').html(data);

這會將data內容添加到段落 HTML 標記中希望對您有所幫助

我如何在 web 頁面上顯示這個？不在 console.log 上

問題描述

2 個解決方案

解決方案1
0 2020-06-06 21:10:46

解決方案2
0 2020-06-07 03:25:30

我如何在 web 頁面上顯示這個？ 不在 console.log 上

問題描述

2 個解決方案

解決方案1 0 2020-06-06 21:10:46

解決方案2 0 2020-06-07 03:25:30

我如何在 web 頁面上顯示這個？不在 console.log 上

解決方案1
0 2020-06-06 21:10:46

解決方案2
0 2020-06-07 03:25:30