javascript - jquery API 请求错误/不会显示 giphy

Question

我无法弄清楚我的代码出了什么问题，以及为什么我的 API/AJAX 调用不会显示我正在调用的图像。当我 console.log(results) 时，会出现调用 10 个图像但它们不会显示的情况。这是我的 jquery 代码..//当窗口加载时...函数将会发生 window.onload = function(){

var musiciansList = [];
var inputBox = $('#submitButton')

//whatever musician the user submits will appear
$('#submitButton').on('click', function(){
    var input=$('#submitButton');
    var userInput=inputBox.val();
    musiciansList.push(userInput);
    renderButtons();
});

function renderButtons() {
        var button = $('<button>');
        button.text(musiciansList[musiciansList.length-1]);
        button.addClass('band')
        $('.container').append(button);

};

//When I click this button a function will happen
$(document).on('click', '.band', function() {

//variable queryUrl for giphy
var queryUrl = "http://api.giphy.com/v1/gifs/search?q=music&api_key=dc6zaTOxFJmzC&limit=10";

    //requesting information giphy
    $.ajax({
        url: queryUrl,
        method: 'GET'
    })//recieving information from giphy
    .done(function(response) {      
        //returns the response from the website
        var results = response.data;
        var imageUrl = response.data.image_original_url; 
        var musicians = $('<img>');         
        console.log(queryUrl)

        //takes var musicians and adds attr src and imageUrl
        musicians.attr('src', imageUrl);
        musicians.attr('alt', 'musician');
        $("#images").push(imageUrl)

        //prepend puts the images in the beginning
        $("#images").prepend(imageUrl);
        $('<img>').val();
        console.log(results)
        console.log(imageUrl)   


        //empty gifs button
        $('#clearButton').click(function(event){
            $(musicians).remove()

        });
    });
});

};

Answer 1

看来您有一些错误。

第一个看起来像是您对 giphy API 的使用。如果您转到http://api.giphy.com/v1/gifs/search?q=music&api_key=dc6zaTOxFJmzC&limit=10在浏览器中，您可以看到数据如何返回。数据以 GIF 对象数组的形式返回，每个对象都有一个“images”属性，其中包含可供选择的各种图像。而不是访问像

这样的图像

var imageUrl = response.data.image_original_url; 

您需要循环遍历response.data数组并抓取图像，如以下示例所示

var imageUrl = response.data[i].images.fixed_height.url; 

您的另一个问题是将您创建的图像元素附加到 DOM 时。您要附加 imageUrl 变量(这只是图像 URL 的值)，而不是您创建的存储在音乐家变量中的 img 元素(这也必须是循环的一部分)。此外，还有以下内容:

$("#images").push(imageUrl)

//prepend puts the images in the beginning
$("#images").prepend(imageUrl);
$('<img>').val();

都可以重构为单行

$("#images").prepend(musicians);

您的最终结果应该类似于:

    for(var i = 0; i < response.data.length; i++){
        var imageUrl = response.data[i].images.fixed_height.url; 
        var musicians = $('<img>');         

        //takes var musicians and adds attr src and imageUrl
        musicians.attr('src', imageUrl);
        musicians.attr('alt', 'musician');

        //prepend puts the images in the beginning
        $("#images").prepend(musicians);
    }