Question

好的，所以我正在设计一个使用HTML，CSS和（希望）XML的网站。我正在尝试使用XML的网站的一个特定部分，我在按照我想要的方式使用XML时遇到了一些困难。

我的问题是我正在尝试使用XML读取图像（或图像目录）的方法，并通过for循环使用调用命令将其打印到我的HTML网站上，因此我可以简单地将数据输入到带有属性的XML文件，可以轻松地为网站上的任何页面调用它们。我还希望最终添加一个搜索栏，我被告知XML将是一个很好的附加组件，因为你可以添加属性和元素。编辑：我相信我正在使用错误的命令将图像拉入XML。有关这方面的任何信息都会有所帮助。

注意：为了简单起见，我已经将HTML和XML的编码简化为我遇到的问题。

这是我的XML文件

<inventory>
<shirt>
    <picture><image href="tank_top.jpg"/></picture>
    <name>Tank Top</name>
    <description>This is a tank top. </description>
    <price>$12.00</price>
</shirt>
<shirt>
    <picture><image href="sweater.jpg"/></picture>
    <name>Sweater</name>
    <description>This is a sweater. </description>
    <price>$15.00 </price>
</shirt>
<shirt>
    <picture><image href="hoodie.jpg"/></picture>
    <name>Hoodie</name>
    <description>This is a hoodie. </description>
    <price>$17.00 </price>
</shirt>
<shirt>
    <picture><image href="long_sleeve_shirt.jpg"/></picture>
    <name>Long-Sleeve</name>
    <description>This is a long-sleeve. </description>
    <price>$20.00 </price>
</shirt>
<shirt>
    <picture><image href="t-shirt.jpg"/></picture>
    <name>T-Shirt</name>
    <description>This is a t-shirt. </description>
    <price>$50.00 </price>
</shirt>
</inventory>

这是我的Javascript

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","Example.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("shirt");
 for (i=1;i&lt;x.length+1;i++)
  {
   document.write(x[i].getElementsByTagName("picture")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  }

我甚至尝试使用以下代码代替图片的第一个“document.write”命令，

var img = new Image（）; img.src = 'insert_image_title_here'; document.body.appendChild（img）;

但这只是在加载了其他所有内容后才将我的图片发送到页面底部。每次打印出其他信息时我都需要加载不同的标题图像（即我需要打印图片，然后是名称，然后是描述，然后是价格。然后是不同的图片以及存储在其中的自己的信息XML文件）。

TL; DR：我需要输出HTML格式的图像，通过JS读取XML文件。我需要XML文件来提取图像，因为for循环我有嵌套的打印命令。简化的XML和HTML代码在上面。寻找解决方案的时间。没有找到任何帮助。

注意：我只是在高中，虽然我已经编写了几年（主要是使用Java并涉及HTML），但我对其他编码世界都很陌生。我其实刚刚开始学习使用XML。任何和所有描述都会非常有用。请包括您认为可能有帮助的任何网络资源或书籍。非常感谢！

Answer 1

尝试将您的内容放在表格中。同时将for循环放在onload对象的onreadystatechange或xmlhttp属性中，例如：

xmlhttp.onload = function() {
    //for loop here...
};
//and then send the request
xmlhttp.send();

并使用xmldoc.documentElement.getElementsByTagName而不是xmldoc.getElementsByTagName ...

更新：避免使用全局变量并使用var来声明变量。

使用XML在HTML中实现图像

1 个答案: