Question

我有一个具有以下结构的XML文件：

<item>
  <title>title</title>
  <description>description</description>
</item>

对于我当前的ajax请求，页面上没有打印结果，不确定为什么吗？

$.ajax({
  url: 'feed.xml',
  dataType: 'xml',
  type: 'GET',
  success: xmlParser,
  success: function(d) {
    console.log($(d).find('item').length || 0);
  }
});


function xmlParser(xml) {
  $(xml).find("item").each(function() {
    $("#container").append('<div class="test">' + $(this).find("title") + '</div>');
    $(".item").fadeIn(1000);
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <!-- print results here -->
</div>

使用上述方法，container div为空吗？

Answer 1

您可以使用jQuery.ParseXML来解析xml的内容，然后尝试使用.text()函数来读取元素中的数据。例如：

function xmlParser(content) {
  var xmlDoc = $.parseXML(content);
  $(xmlDoc).find("item").each(function() {
    $("#container").append('<div class="test">' + $(this).find("title").text() + '</div>');
    $(".item").fadeIn(1000);
  });
}

请参见工作示例：https://jsbin.com/xayazoxela/edit?html,js,output（无ajax请求，因为我们无法在该范围内获取文件）。

您还对ajax请求定义了两次success函数。修复它（如果您想同时调用这两个代码）作为示例：

$.ajax({
  url: 'feed.xml',
  dataType: 'xml',
  type: 'GET',
  success: function(d) {
     xmlParser(d);
     console.log($(d).find('item').length || 0);
  } 
});

检索和显示XML数据

1 个答案: