Javascript 从API响应将图像放在html页面上？_Javascript_Jquery_Json_Ajax_Api

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

javascript jquery json ajax api

Javascript 从API响应将图像放在html页面上？,javascript,jquery,json,ajax,api,Javascript,Jquery,Json,Ajax,Api,我对web开发、ajax等非常陌生。我可以访问Tenor api，因此我可以发送如下请求： https://api.tenor.com/v1/random?q=MYQUERYSTRING&key=MYAPIKEY&limit=1 它用一个JSON文档响应，如下所示（我只是粘贴了一些重要的东西）：现在我需要访问url参数。通过谷歌搜索，我找到了部分解决方案： <!DOCTYPE html> <html> <head> <

我对web开发、ajax等非常陌生。我可以访问Tenor api，因此我可以发送如下请求：

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

它用一个JSON文档响应，如下所示（我只是粘贴了一些重要的东西）：

现在我需要访问

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>


样本页
变量设置={
“异步”：true，
“跨域”：正确，
“url”：”https://api.tenor.com/v1/random?q=MYQUERY&key=MYAPIKEY&limit=1",
“方法”：“获取”
}
$.ajax（设置）.done（函数（响应）{
控制台日志（响应）；
var content=response.results.url；
$（“#myUrl”）。追加（内容）；
});
样本页
网址：

但图像不显示

我已经打开了控制台，我绝对确信响应中充满了数据，并且包含了我需要的图像的URL

如何显示此图像？

您需要设置图像的

src

属性。另外，

results

是一个数组

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

您需要设置图像的

src

属性。另外，

results

是一个数组

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

试着替换

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

与

试着替换

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

与

您需要如下设置

src

属性

img

标记

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

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

您需要如下设置

src

属性

img

标记

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

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

根据您给出的响应对象，我可以在代码中看到两个错误

第一:

$.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);

    });
});

希望这解决了您的问题
根据您给出的响应对象，我可以在代码中看到两个错误
第一:
$.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);

    });
});

希望这解决了您的问题
当您执行console.inf（response）
时，您看到了什么？请参阅和。Append将文本添加到内部HTML执行console.inf（response）
操作时，您会看到什么？请参阅和。Append将文本添加到内部htmlresults
是一个数组。这是一回事，但是response.results.url
仍然未定义<代码>响应。结果是一个数组。当然，你是对的。我没有注意到这一点。刚才看到了var“content”。results
是一个数组。这是一回事，但是response.results.url
仍然没有定义<代码>响应。结果是一个数组。当然，你是对的。我没有注意到这一点。刚刚看到var“content”。