Javascript 使用for循环遍历xml_Javascript_Xml_Parsing_For Loop_Xml Parsing

Javascript 使用for循环遍历xml

javascript xml parsing for-loop

Javascript 使用for循环遍历xml,javascript,xml,parsing,for-loop,xml-parsing,Javascript,Xml,Parsing,For Loop,Xml Parsing,我试图使用for循环来迭代XML文档并将数据放入网页中。我想让这段代码做的是获取XML中的前4个条目，并显示它们的标题、日期、时间和描述。我目前拥有的代码如下所示 <script type="text/javascript"> xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","events.xml",false); xmlhttp.send(); xmlDoc=xmlht

我试图使用for循环来迭代XML文档并将数据放入网页中。我想让这段代码做的是获取XML中的前4个条目，并显示它们的标题、日期、时间和描述。我目前拥有的代码如下所示

<script type="text/javascript">
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","events.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML;
        var i = 0;
        for( i = 0; i <4; i++){

        document.write("<div style=\"display:block;padding-left:5px;\">");
        document.write("<br/>");
        document.write("<strong>What:</strong> <span id=\"title\">  </span>");
        document.write("<br/>");
        document.write("<strong>When:</strong> <span id=\"date\"></span> @ <span id=\"time\"></span>");
        document.write("<br/>");
        document.write("<strong>Description:</strong> <span id=\"descr\"></span><br/></div>");

        document.getElementById("title").innerHTML = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
        document.getElementById("date").innerHTML = xmlDoc.getElementsByTagName("date")[i].childNodes[0].nodeValue;
        document.getElementById("time").innerHTML =xmlDoc.getElementsByTagName("time")[i].childNodes[0].nodeValue;
        document.getElementById("descr").innerHTML =xmlDoc.getElementsByTagName("descr")[i].childNodes[0].nodeValue;}


    </script>


xmlhttp=新的XMLHttpRequest（）；
open（“GET”，“events.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var i=0；
对于（i=0；i签入events.xml，您已经指定了title、date等标记
要解析XML，请使用Android中的XMLPullParser，它更有效、更易于使用
我认为这应该是带有父节点事件的events.xml
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<events>
<event>
<title>Relay for Life Wristband Sale</title>
<date>March 26 &amp; 28 </date>
<time>11 A.M - 3 P.M.</time>
<descr>N/A</descr>
</event>
<event>
<title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
<date>April 1 </date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>CH2MHILL Social/GBM</title>
<date>April 2</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>Relay for Life Bingo</title>
<date>N/A</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
</events>

Use Jquery, see the below code with your XML. It will easy for you.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$.get('events.xml', function(d){

$(d).find('event').each(function(){
    var $entry = $(this);
    var title = $entry.find('title').text();
    alert(title);
})
}); 
</script>
</body>
</html>


生命腕带继电器销售
三月二十六日及二十八日
上午11时至下午3时。
不适用
上海电力/瑞典电力/欧洲电力委员会/IEEE躲避球活动
四月一日
不适用
不适用
CH2M希尔社会/GBM
四月二日
不适用
不适用
生命接力宾果
不适用
不适用
不适用
使用Jquery，查看下面的XML代码。这对您来说很容易。
$.get（'events.xml'，函数（d）{
$（d）.find（'event'）.each（function（）{
var$entry=$（此项）；
var title=$entry.find（'title'）.text（）；
警报（标题）；
})
}); 
请添加events.xml同样在这个问题中，问题是每个标记的id
，在您的代码中，您每次迭代循环时都要替换第一组值。您选择id为title
date的元素，等等。它们在所有元素中都是相同的，它们必须是唯一的。我确实有父节点在原始的xml中，它只是没有正确地复制。您是否仍然在使用jquery时遇到上述代码的问题？？
<event>
    <title>Relay for Life Wristband Sale</title>
    <date>March 26 &amp; 28 </date>
    <time>11 A.M - 3 P.M.</time>
    <descr>N/A</descr>
</event>

<event>
    <title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
    <date>April 1 </date>
    <time>N/A</time>
    <descr>N/A</descr>
</event>

<event>
    <title>CH2MHILL Social/GBM</title>
    <date>April 2</date>
    <time>N/A</time>
    <descr>N/A</descr>
</event>

<event>
    <title>Relay for Life Bingo</title>
    <date>N/A</date>
    <time>N/A</time>
    <descr>N/A</descr>
</event>

<event>
    <title></title>
    <date></date>
    <time></time>
    <descr></descr>
</event>

<event>
    <title></title>
    <date></date>
    <time></time>
    <descr></descr>
</event>

<event>
    <title></title>
    <date></date>
    <time></time>
    <descr></descr>
</event>

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<events>
<event>
<title>Relay for Life Wristband Sale</title>
<date>March 26 &amp; 28 </date>
<time>11 A.M - 3 P.M.</time>
<descr>N/A</descr>
</event>
<event>
<title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
<date>April 1 </date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>CH2MHILL Social/GBM</title>
<date>April 2</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>Relay for Life Bingo</title>
<date>N/A</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
</events>

Use Jquery, see the below code with your XML. It will easy for you.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$.get('events.xml', function(d){

$(d).find('event').each(function(){
    var $entry = $(this);
    var title = $entry.find('title').text();
    alert(title);
})
}); 
</script>
</body>
</html>