Question

我对Web开发，ajax等非常陌生。我可以使用Tenor api，因此可以发送如下请求：

https://api.tenor.com/v1/random?q=MYQUERYSTRING&key=MYAPIKEY&limit=1

它以JSON文档作为响应，该文档如下所示（我仅粘贴了重要内容）：

{
  "results": [
    {
      "tags": [], 
      "url": "https://tenor.com/0liG.gif", 
      "media": [ some other JSON data down there ]
    }]
}

现在，我需要访问该url参数。经过一番谷歌搜索后，我找到了部分解决方案：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <title>Sample Page</title>
      <script>
         var settings = {
           "async": true,
           "crossDomain": true,
           "url": "https://api.tenor.com/v1/random?q=MYQUERY&key=MYAPIKEY&limit=1",
           "method": "GET"
         }

         $.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.results.url;
           $("#myUrl").append(content);
         });
      </script>
   </head>
   <body>
      <h1>Sample Page</h1>
      <div id="someid">URL: 
          <img id="myUrl" src="" />
      </div>
   </body>
</html>

但是没有显示图像。

我已经打开控制台，并且我完全确定响应中充满了数据，并且包含我所需图像的URL。

如何显示此图像？

Answer 1

您需要设置图像的src属性。另外，results是一个数组。

 $.ajax( settings ).done( function ( response ) {
       $( '#myUrl' ).attr( 'src', response.results[ 0 ].url );
 } );

Answer 2

尝试更换

 $("#myUrl").append(content);

与

 $("#myUrl").attr('src', content);

Answer 3

您需要如下设置src属性img标签，

$.ajax( settings ).done( function ( response ) {

    if (response.results[0].length > 0) {
       var content = response.results[0].url; 
       $( '#myUrl' ).attr( 'src', content );
    }
});

Answer 4

根据您提供的响应对象，我在您的代码上看到2个错误。

第一：

$.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.results.url;
           $("#myUrl").append(content);
         });

的

var content = response.results.url;

应该是

var content = response.results[0].url;

第二：

$("#myUrl").append(content);应该是$("#myUrl").attr('src', content);

经过这两个步骤后，它应该会担心。但是如果不是

第三：

用$（document）.ready（）将$ .ajax（）内的所有内容包装起来，如下代码：

$.ajax(settings).done(function (response) {
    $(document).ready(function(){
    console.log(response);
    var content = response.results[0].url;
    $("#myUrl").attr('src', content);

    });
});

希望那能解决您的问题

将图像从API响应放到html页面上？

4 个答案: