0

URLに基​​づいてページを書き込むJavaScript関数を作成する必要があるため、基本的にはURLをチェックし、そこから対応するxmlアイテムを見つけるJavaScript関数を作成しようとしています。

この背後にある理由は、html ページを複製し、名前を変更し、xml を更新するだけで、ページが xml シートから他のすべてを埋めるためです。

これが完全に間違った方法であるかどうか、より良い方法があるかどうかを教えてください。ありがとう！！！

XML コード::

<!--XML INFORMATION-->      
<channel>
<design>
<motion><!--design content-->

<item><!--//////////POST//////////POST//////////POST//////////-->
    <tag>/portfolio_dec.html</tag>

<!--RSS INFORMATION-->      
    <title>Decoze</title>
    <link>http://payamrajabi.com/portfoliotest.html</link>
    <description><img src="http://payamrajabi.com/thumbs/small_jump.png" title="JUMP!." /></description>

<!--PROJECT CONTENT-->

<project><!--project start-->

    <titl>TITLE</titl><!--project title-->
    <dsc>PROJECT DESCRIPTION</dsc><!--project description-->

</project><!--project end-->

</item><!--//////////END//////////END//////////END//////////-->

</motion>
</design>   
</channel>

ジャバスクリプト:

$(document).ready(function(){

    $.ajax({
    type: "GET",
    url: "code/content9.xml",
    dataType: "xml",
    success: function(xml) {

    var xpathname = window.location.pathname;
    var xproject = $(xml).find('tag').text();

    if (xpathname == xproject) {

        $(xml).find('item').children('tag').text(xpathname).each(function(){
            var ttl = $(this).find('titl').text();
            $('<p>'+ttl+'</p>').appendTo('h1#ttl');
        });

        $(xml).find('item').children('tag').text(xpathname).each(function(){
            var dsc = $(this).find('dsc').text();
            $('<p>'+dsc+'</p>').appendTo('h1#ttl');
        });                 

    } else {
        PUT ERROR MESSAGE HERE
    }
    }
    });                 
});

そしてHTML：

<html>
<head>

<script type="text/javascript" src="code/jquery-1.3.1.js"></script>
<script type="text/javascript" src="code/project/project_design.js"></script>

</head>

<body>
<h1 id="ttl"></h1>
<p id="dsc"></p>
</body>
</html>

私はjavascript/jquery/xmlにほとんど慣れていないので、本当に困っています。私が最初にやりたいことは、サイトにデータを入力する xml ファイルを用意することです。各アイテムは新しいページ (この場合はポートフォリオ アイテム) のコンテンツです。

乾杯！

ウィレム

4

1 に答える 1

2

うーん... jquery の仕組みをよく理解していないのではないでしょうか。

コードは次のようになります。

var xpathname = window.location.pathname; 

var xitem = $(xml).find('tag:contains(' + xpathname + ')').parent(); 

if (xproject.length != 0) { 
  $('#ttl').append('<p>' + xitem.find('titl').text() + '</p>'); 
  $('#dsc').append('<p>' + xitem.find('dsc').text() + '</p>'); 
} 
else {
  $('#err').text('The page you requested does not exist'); 
}

デモ1

ここに簡単なデモがあります。ソースを見て、XML と JavaScript を確認してください。

http://jsbin.com/ujiho#itemOne

http://jsbin.com/ujiho#itemTwo

http://jsbin.com/ujiho#itemThree

デモ 2

$.get別の URL から XML を取得するために使用する別のデモを作成しました。

http://jsbin.com/aqefo#nov

http://jsbin.com/aqefo#dec

XML: http://jsbin.com/afiwa

これが JavaScript です。何かを理解するのに助けが必要な場合はお知らせください。

$(function(){
  $.get(
    'http://jsbin.com/afiwa',
    function(xml){

      var hash = window.location.hash.substring(1);

      if ($.trim(hash) === '') {
        showError();
        return;
      }

      var xitem = $(xml).find('urlname:contains(' + hash + ')').parent();

      if (xitem.length != 0) {
        $('#ttl').append(xitem.find('titl').text());
        $('#dsc').append( xitem.find('dsc').text());
      }
      else {
        showError();
      }


      function showError() {
        $('#err').text('The page you requested does not exist');
      }
    }
  );
});
于 2009-05-02T00:35:50.970 に答える