Блог

Главная - Вопросы по программированию - Использование js для извлечения определенных XML-данных

Использование js для извлечения определенных XML-данных

#javascript #xml #xmlhttprequest

#javascript #xml #xmlhttprequest

Вопрос:

Я пытаюсь создать сайт, который будет извлекать XML-узлы в html с помощью xmlhttprequest.

Я хочу отобразить данные в таблицах, проблема заключается в выборе между двумя разными узлами.

В моем xml у меня есть два узла. filmsincinemas и filmsfuturereleases, которые оба имеют по 4 дочерних узла. Я написал javascript для чтения xml-файла и извлечения узла film и его дочерних данных, но он извлекает данные для каждого узла film. Я хочу иметь возможность извлекать filmsincinemas и выпуски filmsfuturereleases по отдельности.

Мой XML выглядит следующим образом ->

 <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<xmlRoot>
    <filmplaylist>
        <filmsincinemas>
            <film>
                <name><![CDATA[Film 1]]></name>
                <website>http://www.movielink.com/</website>
                <video>trailer1.flv</video>
                <hd></hd>
            </film>
            <film>
                <name><![CDATA[Film 2]]></name>
                <website>http://www.movielink.com/</website>
                <video>trailer2.flv</video>
                <hd></hd>
            </film>
            <film>
                <name><![CDATA[Film 3]]></name>
                <website>http://www.movielink.com/</website>
                <video>trailer3.flv</video>
                <hd></hd>
            </film>
        </filmsincinemas>
        <filmsfuturereleases>
            <film>
                <name><![CDATA[Film 4]]></name>
                <website>http://www.movielink.com/</website>
                <video>trailer4.flv</video>
                <hd>trailer4hd.flv</hd>
            </film>
            <film>
                <name><![CDATA[Film 5]]></name>
                <website>http://www.movielink.com/</website>
                <video>trailer5.flv</video>
                <hd>trailer5hd.flv</hd>
            </film>
            <film>
                <name><![CDATA[Film 6]]></name>
                <website>http://www.movielink.com/</website>
                <video>trailer6.flv</video>
                <hd>trailer6hd.flv</hd>
            </film>
        </filmsfuturereleases>
    </filmplaylist>
</xmlRoot>

Мой html / js выглядит следующим образом ->

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XML test</title>

<!-- XML Connect -->
<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","xml/main.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
</script>
<!-- XML Connect END -->

</head>

<body>

<div>
    <table cellspacing="0" cellpadding="0" border="1">

        <script>

        //Set X Var to parent node
        var x=xmlDoc.getElementsByTagName("film");

        //'For each' loop
        for (i=0;i<x.length;i  )
            {
            //Begin Table Row and TD
            document.write("<tr><td>");

            //If Node is empty
            if (x[i].getElementsByTagName("website")[0].childNodes.length == 0) {
                //Print space
                document.write("amp;nbsp;")
                } else {
                    //Print node
                    document.write(x[i].getElementsByTagName("website")[0].childNodes[0].nodeValue);
                }
            //Close row and TD
            document.write("</td><td>");

            //Same loop as previous
            if (x[i].getElementsByTagName("name")[0].childNodes.length) {
                document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
                } else {
                    x = "none"
                }
            //Close TD and Row
            document.write("</td></tr>");
            }

        </script>

    </table>
</div>

</body>
</html>

Заранее спасибо!

Ответ №1:

Ваш код Javascript не очень хорош. Но, кажется, очень просто выполнить то, что вы хотите. Это должно сработать.

 function getTable(xmlDoc){
    //Set X Var to parent node
    var x=xmlDoc.getElementsByTagName("film");
    //'For each' loop
    for (i=0;i<x.length;i  )
        {
        //Begin Table Row and TD
        document.write("<tr><td>");

        //If Node is empty
        if (x[i].getElementsByTagName("website")[0].childNodes.length == 0) {
            //Print space
            document.write("amp;nbsp;")
            } else {
                //Print node
                document.write(x[i].getElementsByTagName("website")[0].childNodes[0].nodeValue);
            }
        //Close row and TD
        document.write("</td><td>");

        //Same loop as previous
        if (x[i].getElementsByTagName("name")[0].childNodes.length) {
            document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            } else {
                x = "none"
            }
        //Close TD and Row
        document.write("</td></tr>");
        }
}

// Will print filmsfuturereleases
getTable(xmlDoc.getElementsByTagName("filmsfuturereleases")[0]);

// Will print filmsincinemas
getTable(xmlDoc.getElementsByTagName("filmsincinemas")[0]);

Комментарии:

1. Если вы готовы поделиться чем-то большим, чем «ваш код javascript не очень хорош», как его можно улучшить?

2. Извините за плохой ввод. Вы должны избавиться от этого document.write вызовов. Они злые и не будут работать, если вы попытаетесь вызвать функцию после завершения загрузки страницы. Попробуйте использовать jQuery или подобную библиотеку для обновления HTML-кода через DOM.

3. Не беспокойтесь. Хорошо, например, $(«body»).append(‘написать материал здесь’);?

4. Это вариант. Лучший подход — записать пустой список <ul id="filmsfuturereleases"></ul> на страницу, а затем добавить к нему <li> вот так. $('#filmsfuturereleases').append('<li>list item number one</li>') . Или что-то подобное со строками таблицы вместо элементов списка

5. Хороший вариант, я выберу этот вариант. Спасибо за вашу помощь!