Giphy API - 调用 AJAX 后无法弄清楚如何调用数据

Question

我目前正在开发一个使用 Giphy API (https://github.com/Giphy/GiphyAPI) 抓取随机 gif 的简单网站。现在我只是在练习，所以我正在尝试制作一个非常简单的网站。我的问题是我不知道如何使用 jQuery 正确获取数据。这是 API 中的数据在我将其记录到控制台时的当前样子。我似乎根本抓不到任何东西。我将如何获取这些数据？例如，如果我想要第一个结果的 bitly_url，我的第一直觉是采用 data[0].bitly_url，但这是行不通的。请帮忙！

这是我的 HTML：

    <body>

<h1 class="animated infinte bounce"> GIFs-A-Go-Go </h1>
    <div class="info">
        <p> Is it GIF with a hard G? Or GIF with a soft G (Jif)? Whatever! Let's get some! </p>
            <form class="zipform">
                <input type="text" class="pure-input-rounded">
                <button type="submit" class="pure_button"> Search for GIFs </button>
                <input type="reset" value="Reset">
            </form>
            <div class="rando_facts animated bounceIn">
                <p id="here_is_gif"> </p>
            </div>
    </div>

还有我的 jQuery/JS 文件：

$('.pure_button').click(function(e) { 
e.preventDefault()
    console.log("click noticed")

$.ajax({


    url: "http://api.giphy.com/v1/gifs/search?q=" + $('.pure-input-rounded').val() +  "&api_key=dc6zaTOxFJmzC",
    type: "GET",
    success: function(data) {
        console.log("This works too")
        debugger
        console.log(data[0].bitly_url) // here is where I'm having an issue!


    }
});
});

*此外，我使用的 Giphy API 密钥是 public 密钥。

Answer 1

试试改成这样。 "data" 是对象中的键名，使用它两次会让人感到困惑。

success: function(response) {
    //console.log("This works too")
    //debugger
    console.log(response.data[0].bitly_url);
}

Giphy API - 调用 AJAX 后无法弄清楚如何调用数据

Giphy API - can't figure out how to call the data once I've made the AJAX call

javascript

database

ajax

jquery

giphy-api