jQuery ile XML'den Veri Almak

jQuery ile XML'den Veri Almak

jQuery ile XML'den Veri Almak

17.9.2015

Bu makalede sizlere JQuery ile XML'den nasıl veri çekilip kullanılacağını göstereceğim. Konu gayet basit ve açık. Tabiki öncelikle JQuery,AJAX ve XML konusunda biraz bilgi sahibi olmanız gerekiyor. Bu yüzden bu konulara makaleye başlamadan önce bir göz atmanızı tavsiye ederim. Konumuza geçecek olursak öncelikle XML oluşturuyoruz. Bu size kalmış. Herhangi bir XML olabilir ya da bir RSS beslemesi de olabilir. Ben kendimce deneme amaçlı şöyle bir XML oluşturdum.

<?xml version="1.0" encoding="utf-8" ?>
<Personlist> 
    <Person> 
        <Name>Eleman1</Name> 
        <Position>Birinci</Position>
    </Person> 
    <Person> 
        <Name>Eleman2</Name>
         <Position>İkinci</Position>
    </Person> 
    <Person> 
        <Name>Eleman3</Name> 
        <Position>Üçüncü</Position> 
    </Person> 
</Personlist>

Daha sonra HTML kod bloğumu ve içine AJAX kontrolümü ekledim.

<!doctype html>
<html>
<head runat="server">
    <title>XML/JSON Deneme</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript"> $(function () {
     $('#getdata').on('click', function () {
         $.ajax({
             url: 'test.xml',
             type: 'GET',
             dataType: 'xml',
             success: function (gelen) {
                 var html = "<table>";
                 $(gelen).find('Person').each(function () {
                     html += "<tr><td><label>Ad:</label>" + $(this).find('Name').text() + "</td><td><label>Pozisyon:</label>" + $(this).find('Position').text() + "</td></tr>";
                 });
                 html += "</table>";
                 $("#showdata").html(html);
             }
         });
     });
 }); </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a href="#" id="getdata">XML Verilerini Al</a>
            <div id="showdata"></div>
        </div>
    </form>
</body>
</html>

Gördüğünüz gibi body tagları arasında ilk önce "getdata" idsi olan bir link ve "showdata" idsi olan bir div oluşturduk. Daha sonra head tagları arasına sayfa hazır olduğunda anlamını taşıyan $(function(){ //sayfa hazır olduğunda çalıştır. }); bu kod bloğunun içine "getdata" idsi olan linke tıklandığında XML'deki verileri getirip "showdata" idsi olan div'in içine yazan script'i hazır hale getirdik. Burada en önemli nokta AJAX'ın dataType property'sinin XML yapılması ve veri kaynağının belirtilmesidir. Veri kaynağı belirtilmediği takdirde sonuç alamayacağımız gibi AJAX doğru bir şekilde çalışmayacaktır.

İLETİŞİM

İletişim Bilgileri

Adres
Kızlarpınarı Mh. Spor Cd. Can Apt. No:28/A Alanya, Antalya
Telefon
(+90) 242-966-2119
Email
info@tulparyazilim.com

İletişime Geç