0

我是 Web Programming 的新手，到目前为止我非常喜欢它。嗯，直到现在。我正在尝试使用 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 时无法正确显示它。不是循环显示 A Quote、Name 和 Location 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);
                });

            }
        })
    });

这是我希望我的 AJAX 代码写入的HTML ：

        <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>

如何使用 AJAX 轻松反映我在 XSL 中显示的内容？我很高兴能进入 Web 编程的世界，但我已经花了 4 多个小时试图让它正常工作，但没有运气。

4

1 回答 1

0

在一个页面中多次使用同一个 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 出现了 3 次，因此它有三个位置可以附加数据。我会做这样的事情：

$(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 中的分号，因为您遗漏了一些。

于 2013-03-12T06:03:56.453 回答