AJAX JQUERY를 사용하여 JSON 데이터에서 이미지를 가져 오는 방법

Question

안녕하세요, AJAX에서 jquery를 사용하여 JSON 파일의 이미지를 가져 와서 내 페이지에 표시하려면 어떻게해야합니까? 여기 내 코드가있다.

function bookSearch(){ 
    var search = document.getElementById('search').value; 
    //Results innerHTML is an empty string, so it would be a new search each time. 
    document.getElementById('results').innerHTML= "" 

    $.ajax ({ 
    url: "https://www.googleapis.com/books/v1/volumes?q=" + search, 
    dataType: "json", 

    success: function(data){ 
     var results= document.getElementById('results'); 
     for(i = 0; i < data.items.length; i++){ 
     results.innerHTML += "<span class='col-md-4'>" + data.items[i].volumeInfo.title + "</span>" 
     results.innerHTML += "<img class='col-md-4'>" + data.items[i].imageLinks.smallThumbnail + "</img>" 

     } 
    }, 
    type: 'GET' 
    }); 
} 

document.getElementById('button').addEventListener('click', bookSearch, false) 

Answer 1

이미지 HTML 요소의 src 속성을 설정해야합니다.

results.innerHTML += "<img class='col-md-4' src='" + data.items[i].volumeInfo.imageLinks.smallThumbnail + "'" 

다음은 코드의 작동 구현물입니다. 또한 jquery를 사용하여 DOM을 조작했다는 점에 유의하십시오.

1. $(document).ready(function() 함수를 추가하면 DOM이 완전히로드되었을 때 이벤트 처리기를 등록 할 수 있습니다.
2. 텍스트 상자에서 값을 가져 오려면 $('#search').val(); 메서드를 사용하십시오.
3. $('#results').html('') 메서드를 사용하여 innerHTML을 설정합니다.
4. 이미지 링크가 응답에 포함되지 않은 시나리오를 처리하기위한 유효성 검사가 추가되었습니다.
5. JQuery와에게 on 방법을 사용하여 이벤트 처리기를 추가 $("#button").on("click", bookSearch);
6. smallThumbnail 속성 data.items[i].volumeInfo.imageLinks.smallThumbnail으로 접근해야하며, 내가 생각하지

$(document).ready(function(){ 
 

 
function bookSearch(){ 
 
    var search = $('#search').val(); 
 
    //Results innerHTML is an empty string, so it would be a new search each time. 
 
    document.getElementById('results').innerHTML= "" 
 

 
    $.ajax ({ 
 
    url: "https://www.googleapis.com/books/v1/volumes?q=" + search, 
 
    dataType: "json", 
 

 
    success: function(data){ 
 
     var innerHTML = ""; 
 
     for(var i=0; i < data.items.length; i++){ 
 
     
 
\t \t if(data.items[i].volumeInfo.title && data.items[i].volumeInfo.imageLinks && 
 
\t \t data.items[i].volumeInfo.imageLinks.smallThumbnail){ 
 
\t \t innerHTML += "<span class='col-md-4' title='>" + data.items[i].volumeInfo.title + "'</span>" + 
 
     "<img class='col-md-4' src='" + data.items[i].volumeInfo.imageLinks.smallThumbnail + "'>"; 
 
\t \t } 
 
    } 
 
\t $('#results').html(innerHTML); 
 
     
 
    }, 
 
    type: 'GET' 
 
    }); 
 
} 
 
$("#button").on("click", bookSearch); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="search" type="text"/> 
 

 
<button id="button">image</button> 
 

 
<div id="results"></div>

Answer 2

data.items[i].imageLinks.smallThumbnail으로 올바른 있습니다 선로. 그러나 'img'태그는 이미지를 표시하기 위해 'src'를 지정해야합니다. 당신이 jQuery를 사용하고 있기 때문에

for(i = 0; i < data.items.length; i++){ 
     results.innerHTML += "<span class='col-md-4'>" + data.items[i].volumeInfo.title + "</span>" 
     results.innerHTML += "<img class='col-md-4' src='" + data.items[i].imageLinks.smallThumbnail + "'/>" 
}