Как я могу получить XML данных из файла, хранящегося на моем P C и заполнить таблицу в HTML, используя javascript? - PullRequest
Новая
       1

Как я могу получить XML данных из файла, хранящегося на моем P C и заполнить таблицу в HTML, используя javascript?

0 голосов
/ 28 февраля 2020

Пожалуйста, смотрите мои XML и HTML ниже: все, что я хочу сделать, это сгенерировать таблицу HTML, используя данные из моего файла XML. (Этот файл XML находится в моем каталоге C, но в той же папке, что и файл HTML.) (C: / Users / Admin / Documents / GameStats / main. html -> Быть основной html файл). (C: / Users / Admin / Documents / GameStats / game. xml -> Быть файлом XML).

Буду признателен за любую помощь. Я не против JAVASCRIPT, AJAX, JQUERY. Буду очень признателен, если вы скажете мне мою ошибку. 

<?xml version="1.0" encoding="UTF-8"?>
    <GAME>
        <COUNTRY>
            <NAME>China</NAME>
            <PLAYERS>80,000</PLAYERS>
            <KILLS>35,060</KILLS>
        </COUNTRY>
        <COUNTRY>
            <NAME>Pakistan</NAME>
            <PLAYERS>234</PLAYERS>
            <KILLS>340</KILLS>
        </COUNTRY>
        <COUNTRY>
            <NAME>Indonesia</NAME>
            <PLAYERS>867</PLAYERS>
            <KILLS>546</KILLS>
        </COUNTRY>
    </GAME>

А это HTML Документ: 

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

<button type="button" onclick="loadXMLDoc()">Get Game Stats</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
//document.body.style.backgroundColor = "red";
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "/game.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Name</th><th>Players</th><th>Kills></th></tr>";
  var x = xmlDoc.getElementsByTagName("COUNTRY");

  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("PLAYERS")[0].childNodes[0].nodeValue +
    "</td><td>"  +
    x[i].getElementsByTagName("KILLS")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }

  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

Я буду признателен за помощь. :)

1 Ответ

0 голосов
/ 28 февраля 2020

Итак, пара вопросов: вам нужен локальный тестовый сервер, чтобы попробовать подобные вещи, если вы не хотите постоянно загружать файлы на удаленный сервер для их тестирования. Существует множество способов настройки локальных тестовых серверов (Python, PHP имеет встроенный тестовый сервер, Virtual Machines и т. Д. c ..), но с xampp вы будете работать примерно через 5 минимум Это бесплатно, и вы найдете видео или учебные пособия по настройке, даже если это просто.

Вторая загрузка XML, я использую следующее: 

function loadXML() {
    var urlVar = ('myXML.xml'); // where your xml file lives
    var succVar = xmlLoaded; // what to do after it's loaded
    $.ajax({
        type: "GET",
        url: urlVar,
        dataType: "xml",
        success: succVar
    });
}
function xmlLoaded(data) {
    var loadedXML = data;
    console.log('xml', $(loadedXML).find('game').html()); // display the content of <game> in your console window
}
...