Получение данных XML с помощью jQuery

Question

Я не могу записать XML-данные в свою HTML-страницу. Кажется, он даже не читает, потому что он даже не насторожился. Какую часть мне не хватает?

Мой 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 часть

$(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

если ответ 200 ok
Это будет $(data).find('Category').each(function(){ вместо $(xml).find('Category').each(function(){
и

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); 

вместо $(".kutu_icerik").html(data);

Answer 2

Предлагаю вам работать с библиотекой шаблонов HTML, например Handlebars. Эти библиотеки помогают генерировать HTML из структурированных данных (объектов и массивов).

Суть вашей задачи состояла в том, чтобы генерировать объекты и массивы из входного XML и писать базовый шаблон, который могут использовать дескрипторы. Ручки будут выполнять утомительную часть генерации HTML.

Преимущества:

• Гораздо чище JS код.
• Гораздо меньше, чтобы пойти не так (особенно, когда речь заходит об эвакуации данных должным образом).
• HTML-шаблоны живут там, где находится весь ваш другой HTML-код.

// 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>