Jquery ajax xml没有被解析

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 错误。我节点内的文本是否可能很长（只是预感），我该如何应对？

欢迎任何帮助， 特维姆

图恩·范·多伦

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

通过这种重构，你应该可以轻松找到问题所在：

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

希望对你有帮助。

---