2012-05-30 21 views
12

Tamamen noob to html, css, javascript ve programlama. Lütfen bana eşlik et.jquery - xml verileri nasıl alınır

Tablomu jquery kullanarak yerleştirmeye çalışıyorum. Veri bir xml dosyasından gelecek.

football_player.xml

:

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

<football_player> 
    <name>Cristiano Ronaldo</name> 
    <club>Real Madrid</club> 
    <number>7</number> 
    <country>Portugal </country> 

    <name>Fernando Torres </name> 
    <club>Chelsea </club> 
    <number>9</number> 
    <country>Spain</country> 

    <name>Iker Casillas</name> 
    <club>Real Madrid </club> 
    <number>1</number> 
    <country>Spain</country> 

    <name>David Beckham</name> 
    <club>Los Angeles Galaxy</club> 
    <number>23</number> 
    <country>England</country> 
</football_player> 

Benim html tablosu:

<table> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Club</th> 
     <th>Number</th> 
     <th>Country</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    </tfoot> 
    </tfoot> 
</table> 

My javascript/jquery komut:

$(document).ready(function() { 
    $.ajax({ 
    type: "GET", 
    url: "football_player.xml", 
    dataType: "xml", 
    success: function(xml) { 
     $(xml).find("football_player").each(function() { 
     $("table tbody").append("<tr>"); 
     $("table tbody").append("<td>" + $(this).find("name").text() + "</td>"); 
     $("table tbody").append("<td>" + $(this).find("club").text() + "</td>"); 
     $("table tbody").append("<td>" + $(this).find("number").text() + "</td>"); 
     $("table tbody").append("<td>" + $(this).find("country").text() + "</td>"); 
     $("table tbody").append("</tr>");   
     }); 
    } 
    }); 
}); 

Gerçekten bir noob Im yemin ederim. Ne yaptığım hakkında hiçbir fikrim yok. Lütfen yardım et. Ben gerçekten öğrenmek istiyorum. Şimdiden teşekkürler.

+0

hakkında fikir alacak Bir ayrıntı kötü bir fikir olmaz @zerkms. – Norse

+0

Dosyadan elde edilen veriler, işlev içinde 'xml 'değişkeninde bulunur. – OptimusCrime

+0

Kodumu güncelledim. Lütfen bir bak. Teşekkürler. – TheOnlyIdiot

cevap

15

örnek XML:

<?xml version="1.0" encoding="utf-8" ?> 
    <RecentBooks> 
    <Book> 
     <Title>My Cool Book Title</Title> 
    <Description>The my cool book is possibly the best cool book in that any developer could use to  be a great web designer.</Description> 
    <Date>12/1/2010</Date> 
    </Book> 
    <Book> 
    <Title>Another PHP book</Title> 
    <Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description> 
    <Date>4/1/2010</Date> 
    </Book> 
    <Book> 
    <Title>jQuery Techniques</Title> 
    <Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description> 
    <Date>6/2/2010</Date> 
    </Book> 
    <Book> 
    <Title>MySQL Database Book</Title> 
    <Description>Brush up your knowledge with the best MySQL database book on the market.   </Description> 
    <Date>14/2/2010</Date> 
    </Book> 
    </RecentBooks> 

Ve HTML & jquery.

$(document).ready(function() { 
$.ajax({ 
    type: "GET", 
    url: "books.xml", 
    dataType: "xml", 
    success: xmlParser 
    }); 
}); 

function xmlParser(xml) { 

$('#load').fadeOut(); 

$(xml).find("Book").each(function() { 

    $(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>'); 
    $(".book").fadeIn(1000); 

}); 

} 

<div class="main"> 
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div> 
</div> 

<div class="clear"></div> 

örneğin geçmesi bakabilir ve aynı

İlgili konular