0

私は Web プログラミングの初心者で、これまでのところ完全に楽しんでいます。さて、今まで。XSLT ファイルを使用してスタイルを設定して表示する前に、JQuery を使用して .XML ファイルからデータを表示しようとしています。これまでのところ、私は順調に進んでいますが、.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

私のウェブページにどのように表示したいかを正確に表示するために、例がコードタグにあることに注意してください。すべて 1 行で。 一番簡単な方法はテーブルを使用することで、各行に新しい証言を入れ、各行に 3 つのセルを含めることができると考えました。1 つは見積もり用、1 つは顧客の名前用、もう 1 つは出身地用です。3 つの証言すべてに対してこれを行う必要があります。私はこれを XSLT で正常に動作させましたが、AJAX を使用すると、非常に苛立たしい理由で正しく表示できません。A Quote、Name、および Location を 3 回にわたって表示するループの代わりに、3 つの引用符すべてをマッシュアップして表示し、次に 3 つの名前すべてをマッシュアップし、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 の各「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 に反映するにはどうすればよいでしょうか? 私は Web プログラミングの世界に飛び込むことに非常に興奮していますが、これを正しく機能させるために 4 時間以上文字通り髪を引き裂きましたが、運がありませんでした。

4

1 に答える 1

0

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が3回発生するため、データを追加する場所が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 が選択され、そこにデータが挿入されます。2 回目の実行では、「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 に答える