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

标签 javascript jquery xml if-statement auto-populate

我需要创建一个 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 文件,其中每个项目都是新页面的内容,在本例中是一个投资组合项目。

干杯!

威廉

最佳答案

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

关于javascript - 使用 XML 和 Javascript/Jquery 填充页面,检查 url 是否与 xml 标记相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/809864/

相关文章:

javascript - 只有 firefox 4 才有流畅的动画

javascript - 如何从 jQuery 重定向到 POST ActionResult?

jquery - 相同的 Div 在 Jquery 中称为错误

xml - 如何在 Eclipse 中禁用 Hibernate 3.0 XML 编辑器?

python - 使用python替换xml标签内容

javascript - 对象数组的无重复版本

javascript - 通过 ReactJS 访问 JSON 中的数组

javascript - 在 javascript/jquery 中格式化值

jquery - 在 bootstrap 上固定一列

xml - XSLT:合并元素而不重复