我在使用 jQuery 加载和解析 XML 时遇到问题，我做错了什么？答案

【问题标题】：I'm having trouble loading and parsing XML with jQuery, what am I doing wrong?我在使用 jQuery 加载和解析 XML 时遇到问题，我做错了什么？
【发布时间】：2012-11-16 17:58:38
【问题描述】：

我正在尝试从 XML 文件中读取设置。我想我没有正确加载对象，或者我的选择器没有按照我的想法做。 appendImages 函数内部的日志消息不执行，我不知道为什么。

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "banner_slider/settings.xml",
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}

XML 示例：

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <img>test1</img>
    <img>test2</img>
    <img>test3</img>
</images>

【问题讨论】：

你的xml无效，最后一个<images>应该是</images>。
谢谢，我修复了无效的 XML (face+palm)。但是，我仍然没有进入 XML 选择器。我在原始问题中替换了appendImages 中的代码。 console.log('appendImages executed'); 正确返回控制台，console.log('path: '+path); 不返回任何内容到控制台。
您没有在#banner中为您的宽度和高度样式设置任何单位
添加了单位，但是无论是否有单位，我仍然没有正确地从 XML 文件中提取信息。
您的代码似乎运行良好，请参阅jsfiddle.net/mowglisanu/yQLx6

标签： jquery xml ajax

【解决方案1】：

试试这个，你必须将响应传递给成功处理程序，我已经修改了你的代码以删除设置，但你可以添加它们并使用 .parseXML 而不是使用 jquery 的 DOM 遍历方法来遍历 xml

 function startSlider(xml) {  
     console.log("xml recieved successfully");
     console.log(window.$xml);
  appendImages(window.$xml);

}

function appendImages( xml ) {
  console.log('appendImages executed');
  xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc ),
    $imgArr = $xml.find( "img" );
    console.log($imgArr);
    $($imgArr).each(function(i,j){
    console.log($(j).text());

    });

}
$(function(){
    window.$xml="<images><img>test1</img><img>test2</img><img>test3</img></images>";

$.ajax({
     type: "GET",
     url: "/echo/json/",
     dataType: "xml",  
     success: startSlider(window.$xml)
 });
});

DMEO

【讨论】：

【解决方案2】：

我认为您需要将数据从 ajax 回调正确地移交给您的函数。

  success: function(data, textStatus, jqXHR) {
        startSlider(data);
   }

在JSFIDDLE查看这个演示

【讨论】：

【解决方案3】：

一旦 Musa 修复了语法错误，我的代码就会按预期运行。谢谢。

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "banner_slider/settings.xml",
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}

示例 XML：

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <img>test1</img>
    <img>test2</img>
    <img>test3</img>
</images>

http://jsfiddle.net/mowglisanu/yQLx6/

【讨论】：