更新映像

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>'); 
    }) 
    }); 
});