如何获取数据并读取响应

问题描述 投票：0回答：1

嗨，我想制作一个笑话应用程序，所以我想从网站上提取笑话并在我的 div 中显示它，这是我的代码，它给了我未定义的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dad Jokes</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="stylesheet.css">
    <script src="code.jquery.com_jquery-3.7.0.js"></script>
</head>
<body>
    <div class="container">
        <h3>Dont Laugh Challenge</h3>
        <div id="jokepad" class="jokepad">
            //joke will be here 
        </div>
        <button id="jokebtn" class="btn">Next Joke from here</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

这是我的 html，我正在使用按钮和 div 来获取笑话并更改它

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600&family=Roboto:wght@400;900&display=swap');
*{
    box-sizing: border-box;
   
}
body{
    font-family:'Roboto', sans-serif;
    margin: 0;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    height: 100vh;
    overflow: hidden;
    background-color: lightsalmon;
}
.container{
    background-color: pink;
    max-width: 100%;
    width:800px;
    border-radius: 10px;
    box-shadow: 0px 10px 10px violet,0px 6px 6px deeppink;
    padding: 20px 40px;
    text-align: center;
}
h3{
    opacity: 0.5;
    margin: 0;
    letter-spacing: 3px;
}
.jokepad{
    margin:20px;
    letter-spacing: 2px;
    font-size: 24px;
}
.btn{
    cursor: pointer;
    padding: 10px 20px;
    border: 0;
    border-radius: 5px;
    background-color: purple;
    color:goldenrod;
}
.btn:focus{
    outline: 0;
}
.btn:active{
    transform:scale(0.95)
}

我的CSS很好

这是 DOM 

var jokeEl = document.getElementById("jokepad");
var jokebtn = document.getElementById("jokebtn");
generateJoke();
jokebtn.addEventListener("click",generateJoke);
function generateJoke(){
    fetch("https://icanhazdadjoke.com",{headers:{
        Accept:"application/json"
    }})
    .then(function(res){ res.json()
    })
    .then(function(data){
         console.log(data);
         jokeEl.innerHTML = data;
   })

使用此代码时，我在 div 中未定义，如果我添加了 .jokes，它就不起作用

javascript dom response fetch-api
1个回答
0
投票

最后一部分只有两处变化

var jokeEl = document.getElementById("jokepad");
var jokebtn = document.getElementById("jokebtn");
generateJoke();
jokebtn.addEventListener("click",generateJoke);
function generateJoke(){
    fetch("https://icanhazdadjoke.com",{
      headers:{
        Accept:"application/json"
    }})
    .then(function(res){
      return res.json();
    })
    .then(function(data){
         console.log(data);
         jokeEl.innerHTML = data.joke;
    })
}

1.不需要解析为

json()
，结果不是JSON，而是将JSON作为输入并解析生成JavaScript对象的结果。 参考：https://developer.mozilla.org/en-US/docs/Web/API/Response/json

2.由于您没有使用箭头函数，您需要使用 retun 语句将数据传递给下一个 .then 函数

3.data 将是一个由笑话组成的对象，因此使用 data.joke 示例输出：

{id: 'apO7pW08pzd', joke: `It's been months since I bought the book "how to scam people online". It still hasn't turned up.`, status: 200}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.