動畫選片-XML(P3)

範例結果

(二)Ajax將XML資料載入

S1:註解取消HTML結構,如下

  <div class="movieAn">
<!-- 
    <div data-tag="new,hot,dvd,theme" class="list">
      <img src="../images/p3/movie01.jpg" alt="">
      <div class="imgContent" data-score="5.5">
        <h4>瓦力<span>發人深省的機器人故事</span></h4>
        <div class="rating"></div>
      </div>
    </div>
-->
  </div>

參考連結:何謂AJAXjQuery AJAX 方法jQuery AJAX 用法及定義

S2:本範例 ( movielist.xml ) XML結構

<movieList>
<movie>
	<title>白雪公主與七個小矮人</title>
	<titleen>Snow White and the Seven Dwarfs</titleen>
	<image>movie06</image>
	<mtime>83分鐘</mtime>
	<country>美國</country>
	<lan>英語</lan>
	<tag>hot,dvd,theme</tag>
	<sub>人人皆知的童話故事</sub>
  <score>9.8</score>
	<desc><![CDATA[
		<p>白雪公主原本是世界上最幸福的人,可惜當她母后逝去,父王娶了她繼母後,這一切都改變了。惡毒的繼母處處為難白雪公主,當她父王也死後,白雪公主過得更艱難了。這天,皇后從魔鏡中得知世上最美的人不是自己而是白雪公主後,氣急敗壞的她下令武士將她帶到森林處決了,好心的武士放走了白雪公主。</p>
		<p>夜晚,森林裡的七個小矮人收留了無家可歸的白雪公主。當皇后得知白雪公主還沒死時,氣急敗壞的她決定親自出馬將白雪公主害死。第二天,她化妝成了一個老婆婆,帶著毒蘋果往森林深處走去。</p>
	]]></desc>
</movie>
<movie>
	<title>瓦力</title>
	<titleen>walle</titleen>
	<image>movie01</image>
	<mtime>96分鐘</mtime>
	<country>美國</country>
	<lan>英語</lan>
	<sub>發人深省的機器人故事</sub>
	<tag>hot,dvd</tag>
  <score>8.5</score>
	<desc><![CDATA[
		<p>西元2805年,人類文明高度發展,卻因污染和生活垃圾大量增加使得地球不再適於人類居住。地球人被迫乘坐飛船離開故鄉,進行一次漫長無邊的宇宙之旅。臨行前他們委託Buynlarge的公司對地球垃圾進行清理,該公司開發了名為WALL·E機器人擔當此重任。 </p>
		<p>這些機器人按照程式日復一日、年復一年辛勤工作,但隨著時間的流逝和惡劣環境的侵蝕,WALL·E們接連損壞、停止運動。最後只有一個仍在進行這項似乎永無止境的工作。經歷了漫長的歲月,它開始擁有了自己的意識。</p>
	]]></desc>
</movie>
...
</movieList>

S3 : Ajax( XML )載入

  //S1 利用【.ajax】加入XML檔案  
  $.ajax({
    url:'movielist.xml',
    dataType:'xml',
    success: function(Mxml){
      //console.log(Mxml);
      $(Mxml).find('movie').each(function(){
        var Mtitle = $(this).find('title').text();
        var Mtitleen = $(this).find('titleen').text();
        var Mimage = $(this).find('image').text();
        var Mmtime = $(this).find('mtime').text();
        var Mcountry = $(this).find('country').text();
        var Mlan = $(this).find('lan').text();
        var Msub = $(this).find('sub').text();
        var Mtag = $(this).find('tag').text();
        var Mscore = $(this).find('score').text();
        var Mdesc = $(this).find('desc').text();
        //console.log(Mtitle);
        $('.movieAn').append(          
          '<div data-tag="'+Mtag+'"  class="list">'+
            '<img src="../images/p3/'+Mimage+'.jpg" alt="">'+
            '<div class="imgContent" data-score="'+Mscore+'">'+
              '<h4>'+Mtitle+'<span>'+Msub+'</span></h4>'+
              '<div class="rating"></div>'+
            '</div>'+
          '</div>'
        ); //append end
      }); //each end
    } //success end
  }); //ajax end

S4 :Ajax( XML )載入後,利用JQ加入【星星】級數,程式必須寫在【success】區域內

  // S2:加星星
    $('.rating').each(function(){
      var $rating = Math.round($(this).parent().data('score')/2);
      // console.log($rating);
      for(var i=0; i<$rating; i++){$(this).append('<i class="fa fa-star"></i>')}
      for(var j=0; j<(5-$rating); j++){$(this).append('<i class="fa fa-star-o"></i>')}
    });

XML結構說明: