載入JSON資料檔呈現到網頁頁面

HTML 部份 

<ul id="imglist">
    <!--  以下 li 是先協助 CSS 排版設計用, CSS處理好即註解  -->        
    <li>
      <img src="images/flower-s/flower1.jpg">
      <h2>Flower1</h2>
      <div><p>zzzzzzzzzzz</p></div>
    </li>
    <!--  以上 li 是先協助 CSS 排版設計用, CSS處理好即註解  -->
</ul>

 

JS 部份：載入XML資料檔 

<script>

$.ajax({
    type:'get'
    ,url:'TSFlowers.json'       //要載入的檔案名稱
    ,dataType:'json'            //載入檔案的資料類型
    //載入成功後要執行的function,並且將載入的資料以TSdata變數帶入
    ,success:function(TSdata){
        console.log(TSdata);
        console.log(TSdata.length);  //TSdata的長度,也就是記錄筆數

        var str=''; 
        //依記錄筆數繞迴圈
        for(var i=0; i < TSdata.length; i++){
            var vtitle = TSdata[i].title;  //取得目前記錄中的title資料
            var vimage = TSdata[i].image;  //取得目前記錄中的image資料
            var vdesc  = TSdata[i].desc;   //取得目前記錄中的desc資料

            //組合<li>.....</li>的網頁元素物件
            str += '<li><img src="images/flower-s/'+vimage+'.jpg">';
            str += '<h2>'+vtitle+'</h2>';
            str += '<div>'+vdesc+'</div>';
            str += '</li>';
        }
        $('#flowerlist').html(str);
    }//success Fn end
});//ajax end 

</script>

 

 

DEMO