通过 jquery ajax 更新 ul 列表中的图像

Question

我有以下 jquery 代码：

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?
      }
    })
  })
})

我将从服务器返回一个 JSON 对象，该对象包含一堆用逗号分隔的值，例如：

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

在我的 html 中，当页面最初加载时（在调用服务器端之前），我正在显示一些图像，如下所示：

<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

我想知道是否可以使用我返回的 json 对象更新我的 html 页面上的图像。所以对于这个例子，在我触发对服务器的请求后，我将得到下面的 html 代码而不是上面的代码。

<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>

我不知道该怎么做。

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

Answer 1

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

[{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();  // 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>');
    })
  });
});