Блог

Главная - Вопросы по программированию - Отображение данных из XML-файла

Отображение данных из XML-файла

#javascript #html #xml

#javascript #HTML #xml

Вопрос:

Я пытаюсь использовать JavaScript для отображения данных из XML-файла. Мои данные не отображаются на веб-странице, и я не уверен, почему.

введите описание изображения здесь

Будем признательны за любую помощь / совет. Мой код показан ниже.

ПРИМЕЧАНИЕ — У меня нет опыта работы с XML, поэтому имейте в виду, что я совершенно новичок в этом.

  <script>
    var xmlData;
    function loadXml () {
        var filename = "CDLibrary.xml";
        var XMLhttp = new XMLHttpRequest();
        XMLhttp.open("GET", filename, true);
        var ok = true;
        try {
            XMLhttp.send();
        }
        catch(err) {
            ok = false;
            alert ("Database not found");
        }
        if (ok) {
            xmlData = XMLhttp.responseXML;
            displayXml(xmlData);
        }
    }
    function displayXml () {
        var CdElements;
        var CdTitle;
        var count;
        CdElements = xmlData.getElementsByTagName("CD");
        for (count = 0; count < CdElements.length; count=count 1) {
            CdTitle = CdElements[count].getElementsByTagName("title");
            document.getElementById("output").innerHTML = document.getElementById("output").innerHTML   CdTitle[0].childNodes[0].nodeValue   "</br>";
        }
    }
 </script>

</head>

<body>
    <div>
        <p id="output">
        </p>
        <p id="buttons">
            <input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml();">
    </div>
</body>

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

1. w3schools.com/xml/tryit.asp?filename=tryajax_xml2

2. Я пытался использовать это, но простое переключение xml-файла и изменение элементов, которые нужно получить, не сработало.

3. 1 ==> onclick="loadXml();" вместо onclick="displayXml()" 2 ==> добавить displayXml(xmlData) после xmlData = XMLhttp.responseXML; и протестировать

4. w3schools.com/xml/cd_catalog.xml возможно, в вашем xml-файле вы изменили значение CD

5. Мамдух, спасибо, теперь он выдает ошибку, в которой говорится, что база данных не найдена. Видите ли вы какие-либо другие ошибки? Или это связано с самой базой данных?

Ответ №1:

     <html>
    <head><title>Import XML Data</title></head>
    <body>
        <div>
            <p id="output">
            </p>
            <p id="buttons">
                <input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml()">
        </div>
<script>
        var xmlData;
        function loadXml () {
            var filename = "CDLibary.xml";
            var XMLhttp = new XMLHttpRequest();
            XMLhttp.open("GET", filename, true);
            var ok = true;
            try {
                XMLhttp.send();
            }
            catch(err) {
                ok = false;
                alert ("Database not found");
            }
            if (ok) {
                xmlData = XMLhttp.responseXML;
              displayXml(xmlData);
            }
        }
        function displayXml(xmlDataBase) {
            var CdElements;
            var CdTitle;
            var count;
            CdElements = xmlDataBase.getElementsByTagName("CD");
            for (count = 0; count < CdElements.length; count=count 1) {
                CdTitle = CdElements[count].getElementsByTagName("title");
                document.getElementById("output").innerHTML = document.getElementById("output").innerHTML   CdTitle[0].childNodes[0].nodeValue   "</br>";
            }
        }
     </script>
    </body>
    </html>

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

1. У меня есть тот же код, но он говорит, что база данных не найдена. Это потому, что мой скрипт находится в тегах head, а не в теле?

2. Не пытайтесь установить XMLhttp.open("GET", filename, true); вместо false

3. и URL-адрес файла должен быть правильным и находиться в том же домене

4. База данных пока не найдена 🙁

5. находится ли ваш XML-файл в том же каталоге, что и ваша HTML-страница?

Ответ №2:

Вы не используете var xmlData, вместо этого вы используете var xmlDataBase. Замените свой код на:

 CdElements = xmlData.getElementsByTagName("CD");

И поскольку вы используете глобальную переменную xmlData, она доступна внутри функции displayXml, в этом случае нет необходимости в функции displayXml (xmlDataBase), если вы используете функцию displayXml(), этого будет достаточно.

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

1. xmlDataBase аргумент не является переменным, и проблема не в этом

2. Я внес изменения, но данные по-прежнему не отображаются.

Ответ №3:

Используя ссылку w3schools и изменив некоторую информацию и каталог, я заставил его работать. Должно быть, в шаблоне, которому я следовал, произошла ошибка, спасибо всем вам за ваше время и усилия.

   <html>
  <style>
  table,th,td {
    border : 1px solid black;
    border-collapse: collapse;
    }
    th,td {
    padding: 5px;
    }
    </style>
    <body>


 <button type="button" onclick="loadDoc()">Get my CD collection</button>
 <br><br>
 <table id="demo"></table>

  <script>
  function loadDoc() {
  var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
   if (this.readyState == 4 amp;amp; this.status == 200) {
    myFunction(this);
   }
   };
   xhttp.open("GET", "CDLibrary.xml", true);
   xhttp.send();
    }
   function myFunction(xml) {
   var i;
   var xmlDoc = xml.responseXML;
   var table="<tr><th>Artist</th><th>Title</th></tr>";
   var x = xmlDoc.getElementsByTagName("CD");
   for (i = 0; i <x.length; i  ) {
   table  = "<tr><td>"  
   x[i].getElementsByTagName("performer")[0].childNodes[0].nodeValue  
   "</td><td>"  
   x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue  
   "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
    }
    </script>

    </body>
    </html>