0

这是我在 Stack Overflow 上的第一篇文章，所以请原谅我的无知。我已经研究 HTML 和 JS 大约 2 个月了。

我在上学时遇到了一个问题。问题如下：

创建一个显示三个随机 Chuck Norris 笑话的网站。使用此处的 API：http: //www.icndb.com/api/。您可以使用此 URL 来获取笑话：http ://api.icndb.com/jokes/random/3 。

我能够从服务器获取数据（笑话）并将它们显示在我的控制台中，但似乎无法弄清楚如何在 HTML 页面上显示它们。我相信这可能是因为我在使用 node.js 时尝试使用 vanilla JavaScript？

这是 JavaScript (jokes.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 (jokes.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 代码。

有错误的终端输出：

在此处输入图像描述

提前感谢您的帮助。

4

2 回答 2

1

由于您已经拥有 api 端点，因此您不需要使用 node.js 获取它，您可以使用 vanilla javascript ajax（http 调用）直接从前端调用它，或者如果您使用的是前端框架（angular/react）。这是一个简单的例子， https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

于 2020-04-14T13:31:29.917 回答
0

另一篇文章通过解释使用客户端 vanilla javascript（或 JQuery）AJAX 调用是正确的，您可以使用脚本标记将其链接到您的 HTML，如下所示：

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

vanilla JS 中的好 AJAX 示例 Vanilla Javascript 版本的 AJAX

于 2020-04-14T13:53:17.407 回答