通过jquery ajax更新ul列表中的图像 [英] updating images in a ul list via jquery ajax

问题描述

  jQuery（function（）{
 jQuery（select＃rooms ）.change（function（）{
 var options =''; 
 jQuery.getJSON（/ admin / selection.php，{id：jQuery（this）.val（），
 ajax：'true'}，
 function（j）{
 for（var i = 0; i< j.length; i ++）{
 //这里应该怎么办？ 
} 
}）
}）
}）
  

<从服务器返回一个JSON对象，它有一堆用逗号分隔的值：

  [{images ：'cfil132，cfil542，cfil341'}] 
  

在我的html中，我展示了一些像这样的图片：

 < ul> 
< li> 
< a> < img height =72width =72alt =src =thumb_image1.jpg/>< / a> 
< / li> 
< li> 
< a>< img height =72width =72alt =src =thumb_image2.jpg/>< / a> 
< / li> 
   

我想知道是否可以更新图片我回到json对象的html页面。所以对于这个例子，在我向服务器发起请求之后，我将拥有下面的html代码，而不是上面的代码。

 < ul> 
< li> 
< a> < img height =72width =72alt =src =cfil132.jpg/>< / a> 
< / li> 
< li> 
< a>< img height =72width =72alt =src =cfil542.jpg/>< / a> 
< / li> 
< li> 
< a>< img height =72width =72alt =src =cfil341.jpg/>< / a> 
< / li> 
< / ul> 
  

我不知道该怎么做。

注意：json对象中的值是动态的，在这种情况下它们是3，但可能是4 5或更多......

假设服务返回的数据是一个单个对象的数组，如：

 
 >  [{images：'cfil132，cfil542，cfil341'}] 
  

然后这样做：

  jQuery（function（）{
 jQuery（select＃rooms）。change（function ）{
 jQuery.getJSON（/ admin / selection.php，{id：jQuery（this）.val（），
 ajax：'true'}，
 function（data） {
 var $ ul = $（'ul＃images'）。empty（）; //图片最后的ul。
 var images = data [0] .images.split（ '，'）; 
 $ .each（图片，函数（idx，img）{
 $ ul.append（'< li>< a>< img src =''+ img + '.jpg'height =72width =72alt =/>< / a>< / li>'）; 
}）
}）; 
}）; 
  

I have the following jquery code:

jQuery(function(){
  jQuery("select#rooms").change(function(){
    var options = '';
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), 
    ajax: 'true'}, 
    function(j){
      for (var i = 0; i < j.length; i++) {
        //what should go here?
      }
    })
  })
})

from the server I will be getting back a JSON object that has bunch of values separated by commas like:

[{images: 'cfil132,cfil542,cfil341'}]

In my html, when page initially loads (before call to serverside), I am displaying some images like so:

<ul>
   <li>
       <a> <img height="72" width="72" alt="" src="thumb_image1.jpg"/></a>
   </li>
   <li>
      <a><img height="72" width="72" alt="" src="thumb_image2.jpg"/></a>
   </li>
</ul

I want to know whether it is possible to update the images on my html page with the json object I get back. So for this example, after I trigger the request to the server I will have the following html code instead of the above.

<ul>
   <li>
       <a> <img height="72" width="72" alt="" src="cfil132.jpg"/></a>
   </li>
   <li>
      <a><img height="72" width="72" alt="" src="cfil542.jpg"/></a>
   </li>
   <li>
      <a><img height="72" width="72" alt="" src="cfil341.jpg"/></a>
   </li>
</ul>

I have no idea how to do this.

Note: values coming in the json object are dynamic, in this case they are 3 but could be 4 5 or more...

解决方案

Assuming the data returned by the service is an array of a single object like:

[{images: 'cfil132,cfil542,cfil341'}]

Then do this:

jQuery(function(){
  jQuery("select#rooms").change(function(){
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), 
    ajax: 'true'}, 
    function(data){
       var $ul = $('ul#images').empty();  // the ul where images end up....
       var images = data[0].images.split(',');
       $.each( images , function(idx, img ) {
         $ul.append('<li><a><img src="' + img + '.jpg" height="72" width="72" alt=""/></a></li>');
    })
  });
});

这篇关于通过jquery ajax更新ul列表中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！