为什么我的AJAX .each循环一次打印所有的XML数据？

Question

我是Web编程新手，到目前为止我非常享受它。那么，直到现在。我试图使用JQuery显示.XML文件中的数据，而之前我使用XSLT文件进行样式化和显示。到目前为止，我正在取得良好进展，但我似乎没有掌握.each循环的工作方式，或至少如何使其正常工作。

下面是我想从显示几件事情我的XML文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!--<?xml-stylesheet type="text/xsl" href="testimonials.xsl"?>--> 
<!DOCTYPE testimonials SYSTEM "testimonials.dtd"> 

<testimonials> 
    <feedback> 
    <quote>Impressively well-versed in their knowledge of GM motors. Very nice and courteous staff, shipping was fast too. Will be purchasing again.</quote> 
    <name>Rich</name> 
    <location>Chester, NY</location> 
    </feedback> 
    <feedback> 
    <quote>Huge selection and extremely helpful staff got me just what I was looking for for my Cobalt SS. Very Happy!</quote> 
    <name>Justin S.</name> 
    <location>Buffalo, NY</location> 
    </feedback> 
    <feedback> 
    <quote>My wife managed to blow up my Tahoe on her way to work. You guys had a new motor to me in less than a week. Couldn't be happier</quote> 
    <name>Jake</name> 
    <location>Matamoras, PA</location> 
    </feedback> 
</testimonials> 

够简单了吧？现在我所要做的就是使用AJAX将其显示在我的页面上。我要为格式是这样的：

“报价” - 姓名 - 位置

一个例子是：

"Huge selection and extremely helpful staff got me just what I was looking for for my Cobalt SS. Very Happy!" - Justin S. - Buffalo, NY 

请注意这个例子的代码标签显示我想要如何显示在我的网页上。 所有在一条线上。我觉得最简单的方法是使用一个表格，每一行可以是一个新的评价，每行可以有3个单元格。一个用于报价，一个用于客户名称，另一个用于他们的家乡。我必须为所有3个推荐做到这一点。我在XSLT中可以正常工作，但出于某些令人非常沮丧的原因，我无法在使用AJAX时使其显示正确。取代3次显示报价，名称和位置的循环，它显示所有三个混合在一起的引号，然后将所有三个名称拼凑在一起，并将所有三个位置挤在各自的段落中。

这里是我的AJAX代码（这是内嵌暂时，我打算将它移动到一个单独的js文件在不久的将来的某个时间）：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "../stylesheets/testimonials.xml", 
      dataType: "xml", 
      success: function (xml) { 
       $(xml).find('feedback').each(function() { 
        var quote = $(this).find('quote').text() 
        $("#p1").append(quote); 
        var name = $(this).find('name').text() 
        $("#p2").append(name); 
        var location = $(this).find('location').text() 
        $("#p3").append(location); 
       }); 

      } 
     }) 
    }); 

这里是我的HTML，我想我的AJAX代码写入：

 <table id="table1"> 
     <tr> 
      <td><p id="p1">"</p></td> 
      <td><p id="p2">-</p></td> 
      <td><p id="p3">-</p></td> 
     </tr> 
     <tr> 
      <td><p id="p1">"</p></td> 
      <td><p id="p2">-</p></td> 
      <td><p id="p3">-</p></td> 
     </tr> 
     <tr> 
      <td><p id="p1">"</p></td> 
      <td><p id="p2">-</p></td> 
      <td><p id="p3">-</p></td> 
     </tr> 
     </table> 

在XSL这很容易，因为我会使用一个For Each循环通过每一个“反馈”标签的XML进行迭代，然后使用Value-Of来显示像这样的相关数据： （用于演示目的XSL文件）

<xsl:for-each select="testimonials/feedback"> 
     <table id="infoTestimonials"> 
     <tr> 
      <td> 
      <font class="infoQuotes">"</font><xsl:value-of select="quote"/><font class="infoQuotes">"</font> 
      </td> 
      <td> - <font size="2pt"><xsl:value-of select="name"/></font></td> 
      <td> - <font size="2pt"><xsl:value-of select="location"/></font></td> 
     </tr> 
     </table> 
    </xsl:for-each> 

我怎么能反映什么我显示，从而容易在XSL使用AJAX？我很高兴能够进入网络编程的世界，但是我已经将我的头发凌乱了超过4个小时，试图让它在没有运气的情况下正常工作。

Answer 1

在单个页面中使用相同的ID多次无效：

<table id="table1"> 
    <tr> 
    <td><p id="p1">"</p></td> 
    <td><p id="p2">-</p></td> 
    <td><p id="p3">-</p></td> 
    </tr> 
    <tr> 
    <td><p id="p1">"</p></td> 
    <td><p id="p2">-</p></td> 
    <td><p id="p3">-</p></td> 
    </tr> 
    <tr> 
    <td><p id="p1">"</p></td> 
    <td><p id="p2">-</p></td> 
    <td><p id="p3">-</p></td> 
    </tr> 
</table> 

您正在使用每个ID（P1，P2，和P3）在本实施例中的3倍。在您的jQuery代码中，您尝试使用$("#p1").append(quote);，但由于“p1”id发生三次，因此它有三个地方可以追加数据。我会做这样的事情：

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "../stylesheets/testimonials.xml", 
     dataType: "xml", 
     success: function (xml) { 
      var i = 1; //Create iterator variable. 
      $(xml).find('feedback').each(function() { 
       var quote = $(this).find('quote').text(); 
       var name = $(this).find('name').text(); 
       var location = $(this).find('location').text(); 
       var testimonial = "\"" + quote + "\" - " + name + " - " + location; //Add formatting to testimonial. 
       $("#p"+i).html(testimonial); //Select id that is "p"+i. 
       i++; //Iterate variable before repeat. 
      }); 

     } 
    }); 
}); 

这将创建一个为1的值的变量i当.each循环第一次运行时，它会选择“P1” ID和数据插入到它。第二次运行时，它将选择“p2”标识并将数据插入到该标识中，依此类推。你将不得不改变你的HTML如下：

<table id="table1"> 
    <tr> 
    <td><p id="p1"></p></td> 
    </tr> 
    <tr> 
    <td><p id="p2"></p></td> 
    </tr> 
    <tr> 
    <td><p id="p3"></p></td> 
    </tr> 
</table> 

你应该小心JavaScript中的分号，因为你留下了几个。