weixin_33743248
weixin_33743248
2019-08-23 04:30
采纳率: 0%
浏览 31

显示来自ajax的src

Requesting path for img src via below code:

$.ajax({
  url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId,
  type: 'GET',

  dataType: "json",
  success: function(response) {

    var path = response.path;
    console.log(path);

    $.each(response, function(key, value) {
      $("#images").attr('src', value.path);
    })
  },
});

But code displaying only one photo, API returning many photos and need to display all. For displaying I am using below code.

return '<div class="container">'+
        '<div class="row justify-content-center text-center my-3"></div>'+
    '<div class="row justify-content-center text-center">'+
        '<div class="col-md-4 mb-3">'+
            '<img id="images" src="" class="img-fluid img-thumbnail"></a>'+
        '</div>'+


    '</div>'+
'</div>';

图片转代码服务由CSDN问答提供 功能建议

                    

通过以下代码请求img src的路径:

  $。ajax({
   网址:“ api / catalogs.php?action = fetchimg&CatalogId =” + d.CategoryId,
   输入:“ GET”,

   dataType:“ json”,
   成功:功能(响应){

     var path = response.path;
     console.log(path);

     $ .each(response,function(key,value){
       $(“#images”)。attr('src',value.path);
     })
   },
 });
  

 

但是代码仅显示一张照片,API返回许多照片,并且需要显示所有照片。 为了显示,我使用下面的代码。

 返回'
'+          '
'+      '
'+          '
'+              ' '+          ''+      ''+ '';     
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • weixin_33737134
    weixin_33737134 2019-08-23 04:44

    Your code is only editing one image src. You should do something like this in your success in $.ajax

    $.each(response, function(key, value){
        $("body").append($("<img>", { src: value.path } ));
    })
    

    This will add an image to the body for each of the paths in your response. Then you can start modifying this to your requirements

    点赞 评论
  • weixin_33713503
    weixin_33713503 2019-08-23 04:45

    Because you are using the same ID for all elements (#images). You need to make it dynamic like add counter with it like ('#images' + counter);

    and the same thing needs to change in HTML.

    点赞 评论
  • csdnceshi61
    derek5. 2019-08-26 17:16

    Finally, see below

     $.ajax({
              url: 'api/catalogs.php?action=fetchimg&CatalogId='+d.CategoryId, 
              type: 'GET',
    
            dataType: "json",
            success: function(response) {                
              var images = "";
              $.each(response, function(key, value){
                images+='<div  class="col-md-4 mb-3">'+                                 
                '<img src="'+value.path+'" class="catalog-image img-responsive thumbnail"></a>'+
                '</div>';
    
              })
              $('#photos').html(images);
    
              },
    

    in HTML above code inserting into below div:

    <div class="container">
                <div id="photos" class="row justify-content-right text-right my-3"></div>
            <div  class="row justify-content-right text-right">
    
            </div>
    </div>
    
    点赞 评论

相关推荐