기상청 XML 파싱

기상청 XML 파싱
javascript/Jquery 2015. 7. 15. 15:18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>
  <!--크로스 도메인 처리 위해 포함 -->
  <script type="text/javascript" src="js/jquery.xdomainajax.js"></script>
  <title>기상청 정보 파싱</title>
  <script type="text/javascript">
  <!--
    $(function(){
        $.ajax(
              {
                  type:'GET',
                  url: 'http://www.kma.go.kr/XML/weather/sfc_web_map.xml', 
                  dataType : 'xml', 
                  success: function(result) {       
                       callback(result);
                   },
                   error: function(result) {
                       alert("error !" + result);
                   }
              }
         )            
    });
 
    function callback(result){
       var xml = result.responseText;
       xmlDoc = $.parseXML( xml ); // XML파싱
       $xml = $(xmlDoc); // 객체 생성
       // 날짜 얻기
       $date = $xml.find("weather"); // weather 태그 찾기
       var yy = $date.attr("year");  // 속성읽기
       var mm = $date.attr("month");
       var dd = $date.attr("day");
       var hh = $date.attr("hour");
       $("#lv").append("<li data-role='list-divider' data-theme='c'>"+yy + "년 " + mm + "월 " + dd + "일 " + hh + "시</li>");    
       $("#lv").listview('refresh');
       var json = [];
       $local = $xml.find( "local" );
       $local.each(function(index){
            var desc = $(this).attr("desc");
            if(desc=="-") desc="";
            var desc = desc;
            var ta = $(this).attr("ta");
            var data = $(this).text();
            json.push({"desc":desc,"ta":ta,"data":data});
       });
 
       $("#Template").tmpl(json).appendTo("#lv");
       $("#lv").listview('refresh');
    }
  //-->
  </script>
    <script id="Template" type="text/x-jquery-tmpl">
        <li> ${data} (현재온도 : ${ta} ${desc})</li>
    </script>
 </head>
 <body>
 <div data-role="page">
    <div data-role="header">
        <h1>기상청 정보 - 전국날씨</h1>
    </div><!-- /header -->
 
    <div role="main" class="ui-content">
        <ul data-role="listview" id="lv">
        </ul>
    </div><!-- /content -->
 
        <div data-role="footer">
            <h4>Copyright hankyong.com</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
    </body>
</html>
 
 
 
Colored by Color Scripter
cs
인기포스트 MORE POST

ABOUT ME

top2blue와 함께하는 세상 top2blue와 함께하는 세상

티스토리툴바
