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

我建议你使用像Handlebars这样的HTML模板库。这些库可帮助您从结构化数据（对象和数组）生成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>

使用jQuery获取XML数据

2 个答案: