Question

所以我用这段代码解析了我的xml，一切正常，直到我添加了一个评论节点。

$(document).ready(function generatexml(){
$.ajax({
                type: "GET",
                url: "data/concerts.xml",
                dataType: "xml",
                success: function(xml){
                $(xml).find("concert").each(function(){
                $('#concerten').append('<div id="tabel" onclick="navigate('+"'"+$(this).find('artist').text()+"'"+')"><div id="tabelimage"><img src="http://griekenland.mixxt.at/storage/images/events/0/0/0/00000000000000000000000000000.jpg"/></div>'
                +'<div id="tabelartist">'+$(this).find('artist').text()+'</div>'
                +'<div id="tabellocation">'+$(this).find('location').text()+'</div>'
                +'<div id="tabelqs">'+$(this).find('review').text()+'</div>'
                +'<div id="tabeldate">'+$(this).find('date').text()+'</div>'
                +'<div id="tabelurl"><a href="'+$(this).find('url').text()+'">'+$(this).find('url').text()+'</a></div>').trigger('create');             
                })
                }
                })
})

xml是这样的：

<?xml version="1.0"?>
<concerts>
<concert>
<artist>Sioen</artist>
<location>De Zwerver leffinge</location>
<date>24/03/2012</date>
<review>Met die woorden, op zelf getekende en verspreide flyers, riep Willis Earl Beal iedereen op hem te bellen om hem één van z’n liedjes te horen zingen</review>
<url>http://www.test.be</url>
</concert>
<concert>
<artist>Sioen</artist>
<location>De Zwerver leffinge</location>
<date>24/03/2012</date>
<review>Met die woorden, op zelf getekende en verspreide flyers, riep Willis Earl Beal iedereen op hem te bellen om hem één van z’n liedjes te horen zingen</review>
<url>http://www.test.be</url>
</concert>
</concerts>

我无法弄清楚它不会解析的原因，我通过xml验证器运行它并且firebug中没有js错误。是否有可能我的节点内的文本很长（只是预感），我该如何反击？

欢迎任何帮助， Tyvm

Toon Van Dooren

Answer 1

不是您特定问题的直接答案，但我认为它可能有用。

我认为你应该考虑在这里使用一些模板引擎。原因如下：

强制您在呈现之前准备/解析数据
允许您单独对每个部件进行单元测试
提高代码可读性和可维护性
以后更容易更新（例如，如果您决定在AJAX请求中返回JSON而不是XML）

请根据您的代码考虑以下example on JSBin（并使用Mustache模板引擎，但您可以找到许多其他引擎）。

下面有一些细节：

1-定义您的模板

<script id="concertsTpl" type="text/x-custom-tpl">
{{#concerts}}
  <div id="tabel" onclick="navigate('{{artist}}')">
    <div id="tabelimage">
      <img src="http://griekenland.mixxt.at/storage/images/events/0/0/0/00000000000000000000000000000.jpg">
    </div>
    <div id="tabelartist">{{artist}}</div>
    <div id="tabellocation">{{location}}</div>
    <div id="tabelqs">{{review}}</div>
    <div id="tabeldate">{{date}}</div>
    <div id="tabelurl">
      <a href="{{url}}">{{url}}</a>
    </div>
  </div>
{{/concerts}}
</script>

2-定义一个解析数据的函数

function parseConcertsData(data) {
  var concerts = [];

  $(data).find("concert").each(function(){
    var concert = {
        artist: $(this).find('artist').text(),
      location: $(this).find('location').text(),
        review: $(this).find('review').text(),
          date: $(this).find('date').text(),
           url: $(this).find('url').text()
    };
    concerts.push(concert);
  });
  return {concerts: concerts};
}

3-发送请求并处理结果

var jqXhr = $.ajax({
      type: 'get',
       url: "data/concerts.xml",
  dataType: 'xml'
});

jqXhr.done(function(xml){

  var concerts = parseConcertsData(xml),
      tpl = $('#concertsTpl').html(),
      rendered = Mustache.to_html(tpl, concerts);

  $('#concerten').append( rendered ).trigger('create');

}).fail(function(){
  alert('Something went wrong with the query');
});

通过这种重构，您应该能够轻松找到问题：

您是否收到了查询回复？
您是否获得了预期的数据（即：是否正确解析了响应）？
模板渲染是否正常？
渲染的模板是否附加到文档？

希望它有所帮助。

Jquery ajax xml未被解析

1 个答案:

1-定义您的模板

2-定义一个解析数据的函数

3-发送请求并处理结果