使用 XML 和 Javascript/Jquery 填充页面，检查 url 是否与 xml 标记相同

发布于 2024-07-18 03:58:52 字数 2477 浏览 6 评论 0原文

我需要创建一个 javascript 函数来根据 url 编写一个页面，所以基本上我试图创建一个 javascript 函数来检查 url，并从那里找到相应的 xml 项目。

其背后的原因是，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>

JAVASCRIPT:

$(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 文件，其中每个项目都是新页面的内容，在本例中是一个投资组合项目。

干杯！

威廉

原文

I need to create a javascript function that will write a page based on the url, so basically I am trying to create a javascript function that will check the url, and find the corresponding xml item from there.

The reason behind this is so that the html page can just be duplicated, renamed, and the xml updated, and the page will fill in everything else from the xml sheet.

please let me know whether this is the completely incorrect way to do it, of it there is a better way. thanks!!!

XML CODE::

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

JAVASCRIPT:

$(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
    }
    }
    });                 
});

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

any help would really be appreciated, i am frairly new to javascript/jquery/xml, and am really having trouble with this. The primary thing I want to do is have an xml file that populates a site, with each item being the content for a new page, in this case of a portfolio item.

cheers!

willem

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铁憨憨 2024-07-25 03:58:52

嗯...恐怕你不太明白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');
      }
    }
  );
});

Hmm... I'm afraid you don't quite understand how jquery works.

Your code should look something like this:

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'); 
}

Demo 1

Here's a quick demo. Take a look at the source to see the XML and the JavaScript.

http://jsbin.com/ujiho#itemOne

http://jsbin.com/ujiho#itemTwo

http://jsbin.com/ujiho#itemThree

Demo 2

I've created another demo that uses $.get to retrieve the XML from a separate URL.

http://jsbin.com/aqefo#nov

http://jsbin.com/aqefo#dec

The XML: http://jsbin.com/afiwa

Here's the JavaScript. Let me know if you need help understanding anything.

$(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');
      }
    }
  );
});

回复收藏 0 原文

~没有更多了~