1

Нужно вывести содержимое XML файла в виде HTML - таблицы. Я делала по примеру отсюда http://www.w3schools.com/xml/tryit.a..._display_table. Но почему-то на странице ничего не выводится. В чем проблема?

Файл HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="json_fun.js"></script>
</head>
<body>

<div id="getXML"></div>
<p><input value="XML" onclick="getXmlFun()" type="button"></p>

</body>
</html>

Файл stock.xml:

<?xml version="1.0" encoding="UTF-8" ?>

<root>

<string>
    <id>1</id>
    <td_date>12.01.2015</td_date>
    <name>Внимание! Акция от ТМ «Лакалут»!</name>
    <text >
        При покупке зубной пасты ТМ «Лакалут вайт» или «Лакалут актив» Вы получаете скидку 30% на зубную щетку ТМ «Лакалут вайт» или «Лакалут актив». 
        </text>
</string>


<string>
    <id>2</id>
    <td_date>12.01.2015</td_date>
    <name>Уважаемые родители! Не упустите возможность принять участие в акции.</name>
    <text>
    При покупке джамбо упаковок Pampers Premium и Pampers Activ Вы гарантировано получаете подарок*! 
    Главный приз-фотосессия для Вас и Вашего малыша.</text>
</string>


<string>
    <id>3</id>
    <td_date>03.12.2014</td_date>
    <name>Вольтарен эмульгель со скидкой 15%!</name>
    <text>
    С 01.12.2014  при покупке Вольтарен эмульгель 50 г., Вы получаете скидку 15%. 
    Скидка по акции не суммируется со скидкой по дисконтной карте.</text>
</string>


<string>
    <id>4</id>
    <td_date>03.12.2014</td_date>
    <name>Скидка 50% при покупке двух единиц ТМ Бюбхен</name>
    <text>
    С 01.12.2014 по 31.12.2014 при покупке двух единиц продукции ТМ «Бюбхен» Вы получаете скидку 50% . 
    Скидка действует на позицию с более низкой ценой.</text>
</string>


<string>
    <id>5</id>
    <td_date>03.12.2014</td_date>
    <name>25% скидка от ТМ NUK!</name>
    <text>
    С 01.12.2014 по 31.12.2014  при покупке любой продукции ТМ «NUK» Вы получаете скидку -25%. 
    Скидка 25% не суммируется со скидкой дисконтной карты.</text>
</string>

</root>

Файл json_fun.js:

function getXmlFun(){

    if (window.XMLHttpRequest)
      {
        xmlhttp=new XMLHttpRequest();
      }

    xmlhttp.open("GET","stock.xml", false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    var str =  '<table border="2" width="600"><th>id</th><th>date</th><th>name</th><th>text</th>';
    var x=xmlDoc.getElementsByTagName("string");

    for (i  =0; i<4; i++)
      { 

      str += "<tr><td>" + x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue + "</td><td>" + 
      x[i].getElementsByTagName("td_date")[0].childNodes[0].nodeValue + "</td><td>" +
      x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" +
      x[i].getElementsByTagName("text")[0].childNodes[0].nodeValue + "</td></tr>";
      }
    str += "</table>";
    document.getElementById("getXML").innerHTML = str;
}
2
  • чего пишет в отладчике? 27 апр 2015 в 14:50
  • @teovankot ошибок никаких не выдает 27 апр 2015 в 14:57

2 ответа 2

0

На самом деле он вам пишет вот такую ошибку:

XMLHttpRequest cannot load file:///C:/stock.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.getXmlFun @ json_fun.js:9

Проблема заключается в том, что нельзя просто так обратиться через XMLHttpRequest к локальному файлу, другими словами нельзя обратиться по адресу начинающемуся с file:// или C:/. Это нужно для безопасности, чтобы нельзя было просто взять и слить файлы с локальной машины помощью js.

Вы можете положить ваш файл на вэбсервер и обратиться к нему по протоколу http:// вот так:

http://какой-то-хостинг.рф/stock.xml

5
  • То есть локально нельзя подключить? Может существует еще какой-то способ решения проблемы? Мне нужно просто отобразить XML в HTML файле в виде таблицы 27 апр 2015 в 15:08
  • Можете попробовать xml определить в виде текстовой переменной. Но разве тяжко локальный вэбсервер поднять? 27 апр 2015 в 15:10
  • если честно, не пойму что подразумевается под "поднятием локального вэбсервера" 27 апр 2015 в 15:15
  • спасибо огромное за совет! я все таки установила локальный веб-сервер (с помощью xampp) и теперь все работает!)) 1 мая 2015 в 10:12
  • Ну отлично, если помогло, обычно принимают ответ 1 мая 2015 в 10:47
-1

Вариант с использованием jQuery (можно и без него - просто писать дольше будет)

Допустим, вы получили XML данные с сервера через AJAX запрос:

$.get('/url_of_the_xml_resource')
  .done(function(data){
    data = $.parseXML(data);
    // дальше обрабатываем полученные данные
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
console.log('ошибка', jqXHR, textStatus, errorThrown);
});

Ну или просто для примера уже как бы они есть через jQuery.parseXML() :

var data = $.parseXML(" -- тут ваш Xml как строка --- ") 

Дальше работаем с переменной 'data'. Например, так:

// допустим у нас есть на странице элемент <div id="container"></div> 
// куда мы будем писать наш HTML. 
var container = $('#container'); 

$(data)
  // берем все элементы <string>
  .find('string')
  // и побежали по каждому <string>
  .each(function(index, item){
    // получаем объект XML узла
    var string = $(item)

    // получаем дочерние элементы узла 
    var id = string.find('id').text()
    var name = string.find('name').text()
    var text = string.find('text').text()

    // добавляем результирующий HTML в контейнер
    container
      .append('<h2 id="' + id + '">' + name + '</h2>')
      .append('<p>' + text + '</p>');
  });

Писал все без проверок. Должно работать. Попробуйте.

5
  • проблема то в том, что вебсервера нет и никакого запроса на получение файла послать не получиться, если не подкрутить браузер 27 апр 2015 в 19:46
  • не понял, почему кто-то минусует... это спасибо за попытку помочь? 28 апр 2015 в 9:59
  • 1
    Это какая-то лабораторная работа что ли? HTML страница не на сервере будет лежать, а просто открываться на локальном диске? Некоторые браузеры (включая Chrome) не позволяют грузить файл с локальной файловой системы. Можно обойти, запустив Chrome с ключом --allow-file-access. Статья по теме. Но если нужно кросс браузерное решение - следует положить ваши файлы на сервер (можно на локальный, чтобы открываемая веб страница имела URL вроде localhost/MyLab/test.html 28 апр 2015 в 10:17
  • Полностью согласен. 28 апр 2015 в 10:19
  • @DmitryPavlov да, лабораторная. html документ будет на локальном диске.. спасибо, попробую) 28 апр 2015 в 20:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.