Блог

Главная - Вопросы по программированию - Как вызвать API и распечатать значение в div при загрузке страницы?

Как вызвать API и распечатать значение в div при загрузке страницы?

#javascript #html

Вопрос:

Я пытаюсь вызвать API, а затем распечатать ответ внутри тега div. Возможно, было бы легко сделать это с помощью jQuery, но я стараюсь этого избежать. В настоящее время загружается только пустая страница.

 <body>
    <div id="OnLoad"></div>
    <script>
        function myFunction() {
            fetch('https://jsonplaceholder.typicode.com/posts')
            .then((res) => res.json())
            .then((data) => {
                console.log(data);
                document.getElementById('OnLoad').innerHTML = data;
            })
        }
    </script>
</body>

Я попробовал сделать следующее, но это не сработало.

 document.getElementById('OnLoad').addEventListener('load', myFunction)
 
 <div id="OnLoad" onload="myFunction()"></div>

В принципе, я могу исправить это, вызвав функцию внутри тега сценария. Но есть ли какой-либо способ вызвать его напрямую из тега div.

Любая помощь будет признательна.

Ответ №1:

Элементы Div не загружают внешний контент. Поскольку они ничего не загружают: у них нет события загрузки.

Просто позвоните myFunction сразу после конечного тега для div… или не используйте функцию.

 <div id="OnLoad"></div>
<script>
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
            document.getElementById('OnLoad').innerHTML = data;
        });
</script>

Ответ №2:

 <body>

    <div id="OnLoadBefore">
    <!-- This throws error as myFunction is not yet defined -->
      <script>myFunction('OnLoadBefore')</script>
    </div>
    
    <script>
        function myFunction(selector) {
            document.getElementById(selector).innerHTML = "Test Div Load";
        }
    </script>
    
    <div id="OnLoadAfter">
    <!-- This executes myFunction as myFunction is defined -->
      <script>myFunction('OnLoadAfter')</script>
    </div>
    
</body>

Лучше всего проводить такие события с событиями onload, когда все ресурсы страницы доступны, window.onload = function() { myFunction() } зарегистрируют функцию для выполнения при загрузке. тег тела html допускает событие onload. Смотрите фрагмент ниже…

 function myFunction(selector) {
            document.getElementById(selector).innerHTML = "Test Div Load";
        }
function onLoad() {
  myFunction('OnLoadBefore');
  myFunction('OnLoadAfter');
} 
 <body onload="onLoad()">

    <div id="OnLoadBefore"></div>
    
    <div id="OnLoadAfter"></div>
    
</body>
Метки: