Blog Content

    티스토리 뷰

    59.jQuery - XML 데이터 읽어오기 ( 09.Ajax )

    반응형
    Xml에서 데이터 가져올때(읽어올때) $.get
    공백 주의! 주석 주의!

    04.Company.htm

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>XML 파일 로드하기</title>

     

        <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                $('#btn').click(function() {

                    $.get('04.Company.xml', function(data) {

                        $('#ctlGrid').empty();

                       

                        $(data).find('Company').each(function() {

                            var $entry = $(this);//현재 시점의 레코드의 엔트리를 읽어오기

                           

                            //특성(Attribute)읽어오기

                            var html =

                                 "<div>" + $entry.attr('CompanyType') + "</div>";

                            html +=

                                 "<div>" + $entry.find('CompanyNumber').text() + "</div>";                       

                           

                            //하위 엔트리 읽어오기

                            $('#ctlGrid').append($(html));

                        });

                    });

                });

            });

        </script>

    </head>

     

    <body>

        <input type="button" id="btn" value="회사소개" />

       

        <div id="ctlGrid"></div>

    </body>

    </html>


    04.Company.xml    [ XML파일 ]

    <?xml version="1.0" encoding="utf-8"?>

    <Company CompanyType="Private">

      <CompanyName>닷넷코리아</CompanyName>

      <CompanyNumber>123</CompanyNumber>

      <CompanyAddress>서울</CompanyAddress>

      <Name>레드플러스</Name>

    </Company>


    결과화면

    [그림59-1]



    반응형

    Comments