2013-05-25 28 views
0

我正在尝试创建一个脚本,它将根据我所希望的XML文件的信息生成div。问题是我的脚本根本不起作用。我所做的就是在w3schools.org上找到代码并对其进行了一些修改,以匹配我希望它做的事情。Javascript未能生成包含XML信息的div。 (xml初学者)

结果:

<script type="text/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","products.xml",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML; 

var size=0; 
var i=0; 
var x=xmlDoc.getElementsByTagName("honey"); 
var y=x.length; 
var final=null; 

function gethoney() 
{ 
    for (i < y) 
    { 
    a1='<div style="height:200px;width:300px;float:left;background-color:#FFF5CC;opacity:0.7;text-align:center;">'; 
    a2='<p><b>'; 
    a3=(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue); 
    a4='<br>'; 
    a5=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue); 
    a6='</br></b></p>'; 
    a8='</div>'; 
    a9='<div style="height:200px;width:20px;float:left;"></div>'; 
    a10='<div style="height:200px;width:100px;float:left;">'; 
    a11=(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue); 
    a12='</div>'; 
    final=final + a1 + a2 + a3 + a4 + a5 + a6 + a8 + a9 + a10 + a11 + a12; 
    size=size+300; 
    i=i+1; 
    } 
document.getElementById("mainbody").style.height=size; 
size=size-20; 
document.getElementById("products").style.height=size; 
document.getElementById("products").innerHTML=final; 
} 
</script> 

为了节省每一个DIV使用最终似乎并不喜欢我的理想方式,但我就是这么做的。

和XML是这样的:

<?xml version="1.0" encoding="windows-1252"?> 
<honey> 
    <name>one</name> 
    <price>3</price> 
    <image><img src=""></img></image> 
    <disc>This is a honey</disc> 
</honey> 
<honey> 
    <name>one</name> 
    <price>3</price> 
    <image><img src=""></img></image> 
    <disc>This is a honey</disc> 
</honey> 
etc etc 

我试图找到这个,但没有任何运气信息。任何人都可以指出我做错了什么,并建议改进/更正?另外,如果有人可以写下生成div的方法,而不使用最后的来保存它们,然后再使用innerHTML,那么将不胜感激。

+0

您的XML文件是无效的:它只能包含1根标记。将1个标签内的''标签包裹起来。 – ZippyV

+0

不添加1根标签是我的一个巨大的错误,我已经修复,但并没有完全解决所有问题。 – Rinera

回答

0

1)您的xml文件不是xml。

2)更改此:

xmlDoc=xmlhttp.responseXML; 

这样:

xmlDoc = xmlhttp.responseXML.documentElement; 

2)

for (i < y) 

这是一个错误。

4)您可以定义一个称为gethoney()的函数,它永远不会调用。但你不应该调用该函数,直到你能得到像这样的工作:

console.log("==>" + xmlDoc[0].getElementsByTagName("name")[0].childNodes[0].nodeValue); 
+0

它现在很好用!我把(x '中放入的内容完全是错误的。 – Rinera

+0

是的,gethoney()里面的代码试图获取开始和结束标签之间的内容,如果你看看你的xml是....什么都不是。如果要获取标记的src _attribute_的值,可以通过调用标记上的getAttribute('src')来获取该值,所以x [0] .getElementsByTagName(“img”)[0]。 getAttribute('src') – 7stud

+0

“我在中输入的内容是完全错误的”,如果你自己构建了xml文件,为什么不能像这样:'http:// website.com/images/flower.jpg' 7stud