javascript - 如何使用 AJAX JQUERY 从 JSON 数据中抓取图像

Question

您好，如何使用 jquery 和 AJAX 来从 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 访问，而不是作为 data.items[i].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++){
        
		if(data.items[i].volumeInfo.title && data.items[i].volumeInfo.imageLinks &&
		 data.items[i].volumeInfo.imageLinks.smallThumbnail){
		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 + "'>";
		}
    }
	$('#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>