Извлечение данных с сервера (API?) И отображение их на странице HTML - PullRequest
Новая
       32

Извлечение данных с сервера (API?) И отображение их на странице HTML

0 голосов
/ 14 апреля 2020

Это мой первый пост о переполнении стека, поэтому прошу прощения за любое невежество с моей стороны. Я преследую HTML & JS уже около 2 месяцев.

У меня проблемы с вопросом, который мне задают в школе. Вопрос в следующем:

Создайте веб-сайт, который будет отображать три случайных шутки Чака Норриса. Используйте API, найденный здесь: http://www.icndb.com/api/. Вы можете использовать этот URL для извлечения шуток: http://api.icndb.com/jokes/random/3.

Я могу получить данные (шутки) с сервера и отобразить их в моей консоли, но не могу кажется, выяснить, как отобразить их на странице HTML. Я полагаю, это может быть связано с тем, что я пытаюсь использовать ваниль JavaScript при работе с node.js?

Вот это JavaScript (шутки. js) 

require('isomorphic-fetch');

const request = async () => {
  const response = await fetch("http://api.icndb.com/jokes/random/3");
  const json = await response.json();
  console.log(json);
    joke1 = json.value[0].joke;
    document.getElementById("disp").innerHTML = joke1;
}
request();

А вот HTML (шутки. html) 

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Chuck Norris Jokes</title>
    <meta charset="utf-8">
    <!--My CSS File-->
    <link href="jokes.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!--Icons-->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
<div class="container">

<h1>Chuck Norris Jokes</h1>
<br>

<div id="disp">

</div>

</ul>

</div>

<!--My JavaScript File-->
<script type="text/javascript" src="jokes.js"></script>

</body>

</html>

Вот вывод моей консоли с ошибкой, которую я понятия не имею, что это значит, даже после большого количества прибегая к помощи. Это то, что происходит, когда я печатаю «шутки с узлами» в терминале. Используя VS Code.

Терминальный выход с ошибкой:

enter image description here

Спасибо заранее за помощь.

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Поскольку у вас уже есть конечная точка API, вам не нужно извлекать ее, используя node.js, вы можете вызывать ее напрямую из внешнего интерфейса, используя vanilla javascript ajax (вызов http), или если вы используете внешний интерфейс рамки (угловые / реагирующие). Вот простой пример, https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

0 голосов
/ 14 апреля 2020

Другой пост является правильным, объясняя использование ванильного вызова javascript (или JQuery) AJAX на стороне клиента, и вы бы связали его со своим HTML, используя тег script, например: 

<script src="myscripts.js"></script>

хорошо AJAX в ванили JS пример ваниль Javascript версия AJAX

...