Question

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

<?xml version="1.0" encoding="utf-8" ?>
<Photobank>
 <Landowner Name="Arnoldo"> 
  <Photo>
   <Animal>Jaguar</Animal>
   <Category>Cat</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
  <Photo>
   <Animal>Tapir</Animal>
   <Category>Prey</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
 </Landowner>
 <Landowner Name="Charlie">
  <Photo>
   <Animal>Margay</Animal>
   <Category>Cat</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
  <Photo>
   <Animal>Tayra</Animal>
   <Category>Prey</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
 </Landowner>
</Photobank>

我想让我的页面在初始页面加载时解析并格式化一个土地所有者的所有照片，然后清空div并用不同的土地所有者的照片填充它当按下按钮时。到目前为止，我能够解析XML并在初始加载时获得适当的土地所有者的照片，但是我在编写函数时遇到了麻烦，因此我也可以使用它来显示其他土地所有者的照片。

这是jQuery Ajax：

$.ajax({
    type: "GET",
    url: "xml/photobank.xml",
    dataType: "xml",
    success: xmlParser
});


function xmlParser(xml) {
    $('#photo_container').empty();
    console.log('1');
    $(xml).find('Landowner').each(function(){
        console.log('2');
        var landownerName = $(this).attr('Name');
        if (landownerName==="Charlie") {
            $(this).find('Photo').each(function(){
                $("#photo_container").append('<div class="photo ' + $(this).find("Category").text().toLowerCase() + '"><p>' + $(this).find("Animal").text() + '</p>'+ '<img class="photobank" src="images/' + $(this).find("Image").text() + '" />' + '</div>');
            })
        }
    });
}

我想用函数用作参数的变量替换==="Charlie"中的xmlParser，但每次我尝试向函数声明添加参数时，初始Ajax加载都会停止工作。任何提示？

下面我的开发页面上的代码尝试使用＆＃34; Arnoldo＆＃34;按钮切换内容，但我不能走得太远。我也愿意使用不同的方法来实现这个目标（非Ajax，JSON？），如果这样会更好的话。我希望将来很容易让其他人添加照片信息。

实例： HTML：http://lamanai.org/catmap/index.html

JS：http://lamanai.org/catmap/js/cameramap.js

XML：http://lamanai.org/catmap/xml/photobank.xml

更新：下面的ShankarSangoli帮助我按照我想要的方式构建了这个函数，但现在我的初始Ajax调用不起作用。我在控制台中得到Uncaught Error: Invalid XML: [object Document]。我想我是在错误的时间调用Ajax（目前正准备好文档）。有任何想法吗？查看上面链接的实时页面。

Answer 1

在使用之前，您应该使用$.parseXML解析xml。您可以拥有一个匿名成功处理程序，然后调用xmlParser传递xml数据和另一个参数。

$.ajax({
    type: "GET",
    url: "xml/photobank.xml",
    dataType: "xml",
    success: function(xml){
        xmlParser(xml, "Arnoldo");
    }
});

function xmlParser(xml, landOwner) {

    xml = $.parseXML(xml);

    $('#photo_container').empty();
    console.log('1');
    $(xml).find('Landowner').each(function(){
        console.log('2');
        var landownerName = $(this).attr('Name');
        if (landownerName === landOwner) {
            $(this).find('Photo').each(function(){
                $("#photo_container").append('<div class="photo ' + $(this).find("Category").text().toLowerCase() + '"><p>' + $(this).find("Animal").text() + '</p>'+ '<img class="photobank" src="images/' + $(this).find("Image").text() + '" />' + '</div>');
            })
        }
    });
}

参考：http://api.jquery.com/jQuery.parseXML/

调用Ajax成功参数的函数？

1 个答案: