Question

我是网络编程的新手，到目前为止，我非常享受它。好吧，直到现在。我正在尝试使用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在我的页面上显示它。我想要的格式是这样的：

“quote” - 姓名 - 位置

一个例子是：

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

请注意，该示例位于代码标记中，以准确显示我希望它在我的网页上显示的方式。 ALL ON ONE LINE。我认为最简单的方法是使用一个表，其中每一行都可以是一个新的推荐，每行可以有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中的每个“Feedback”标记，然后使用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>

如何使用AJAX在XSL中轻松反映我所显示的内容？我很高兴能够进入网络编程的世界，但我已经把我的头发撕成了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”id并将数据插入其中，依此类推。您必须将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中的分号，因为你留下了一些。

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

1 个答案: