使用jQuery获取XML数据

Question

I can not write XML data into my HTML page. It seems it's not even reading, because it doesn't even alert. What part am I missing ?

My XML:

<ProgramOgrenmeCiktilari>

    <Category>
        <TopTitle> Bilgi </TopTitle>
        <Title> Kuramsal, Olgusal </Title>
        <Text>- Matematik, fen bilimleri ve ilgili mühendislik disiplinine özgü konularda yeterli bilgi birikimi;...
             </Text>
    </Category>

    <Category>
        <TopTitle> Beceriler </TopTitle>
        <Title> Bilişsel, Uygulamalı </Title>
        <Text>- Karmaşık bir sistemi, süreci, cihazı veya ürünü gerçekçi kısıtlar ve koşullar altında,...
            </Text>
    </Category>

    <Category>
        <TopTitle> Yetkinlikler </TopTitle>
        <Title> Bağımsız Çalışabilme ve Sorumluluk Alabilme Yetkinliği </Title>
        <Text>- Disiplin içi ve çok disiplinli...</Text>
    </Category>

</ProgramOgrenmeCiktilari>

jQuery part

$(document).ready(function () {
    /* here goes some other codes about other buttons... */

    $("#program").click(function () {
        $.get('ProgramOgrenmeCiktilari.xml', function (data) {
            $(xml).find('Category').each(function () {
                var TopTitle = $(this).find('TopTitle').text();
                var Title = $(this).find('Title').text();
                var Text = $this.find('Text').text();

                var html = '<tr>   <td colspan="3" style="background-color:#DFE4FF;"><b>TopTitle     </b></td> </tr> ';
                html += '<tr> <td><br> <b>Title</b> <br><br>Text <br><br></td></tr><tr>';

                $(".kutu_icerik").html(data);
            });
        });
    });
});

Answer 1

if response is 200 ok
It be $(data).find('Category').each(function(){ instead of $(xml).find('Category').each(function(){
and

var html = '<tr><td colspan="3" style="background-color:#DFE4FF;"><b>+'TopTitle'+</b>/td> </tr> ';
html += '<tr> <td><br> <b>'+Title+'</b> <br><br>='+Text'+<br><br></td></tr>';
$(".kutu_icerik").html(html);  

instead of $(".kutu_icerik").html(data);

Answer 2

I suggest you work with an HTML templating library like Handlebars . These libraries help you generate HTML from structured data (objects and arrays).

Sou your task would be to generate objects and arrays from the input XML and write a basic template that handlebars can use. Handlebars will then do the tedious part of HTML generation.

Advantages:

• Much cleaner JS code.
• Much less to to go wrong (especially when it comes to escaping data properly).
• HTML templates live where all your other HTML is.

 // prepare the template (you only need to do this once) var categoryTemplate = Handlebars.compile($("#Category-template").html()); // this is what the server returns var xml = "<ProgramOgrenmeCiktilari>\\ <Category>\\ <TopTitle> Bilgi </TopTitle>\\ <Title> Kuramsal, Olgusal </Title>\\ <Text>- Matematik, fen bilimleri ve ilgili mühendislik disiplinine özgü \\konularda yeterli bilgi birikimi;...\\ </Text>\\ </Category>\\ <Category>\\ <TopTitle> Beceriler </TopTitle>\\ <Title> Bilişsel, Uygulamalı </Title>\\ <Text>- Karmaşık bir sistemi, süreci, cihazı veya ürünü gerçekçi kısıtlar ve koşullar altında,...\\ </Text>\\ </Category>\\ <Category>\\ <TopTitle> Yetkinlikler </TopTitle>\\ <Title> Bağımsız Çalışabilme ve Sorumluluk Alabilme Yetkinliği </Title>\\ <Text>- Disiplin içi ve çok disiplinli...</Text>\\ </Category>\\ </ProgramOgrenmeCiktilari>"; // in the Ajax success callback... var categories = $(xml).find('Category').map(function () { return { TopTitle: $(this).find('TopTitle').text(), Title: $(this).find('Title').text(), Text: $(this).find('Text').text() }; }).toArray(); $(".kutu_icerik tbody").html(categoryTemplate(categories)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> <script id="Category-template" type="text/x-handlebars-template"> {{#each .}} <tr> <td colspan="3" style="background-color:#DFE4FF;"> <b>{{TopTitle}}</b> </td> </tr> <tr> <td></td> <td colspan="2"> <b>{{Title}}</b> <br> <br>{{Text}} </td> </tr> {{/each}} </script> <table class="kutu_icerik"> <thead> <tr> <th>Col1</th><th>Col2</th><th>Col3</th> </tr> </thead> <tbody> </tbody> </table>