Как написать AJAX-вызов для получения XML-файла? - PullRequest
Новая
       0

Как написать AJAX-вызов для получения XML-файла?

1 голос
/ 19 октября 2019

Мне нужно написать веб-страницу с кнопкой «Получить информацию о рейсе». Когда пользователь нажимает эту кнопку, напишите вызов AJAX, чтобы получить файл XML, который вы написали в вопросе 1, проанализируйте XML в объект Javascript, а затем отобразите объект Javascript на веб-странице в точности следующим образом: enter image description here

Вот мой код до сих пор. Я чрезвычайно новичок в этом, поэтому, пожалуйста, идите спокойно, ребята! :

XML: 

<?xml version="1.0" encoding="UTF-8"?>
<flightInfo>
<Date>02OCT19</Date>
<Flight> VA 1429 </Flight>
<Depart>Sydney</Depart>
<Arrive>Cairns</Arrive>
<Boarding>Gate 35 At 1855</Boarding>
<Carrier>Virgin Australia</Carrier>
</flightInfo>
<?xml version="1.0" encoding="UTF-8"?>

HTML: 

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

<button type="button" onclick="loadDoc()">Get flight 
information</button>
<br><br>
<table id="demo"></table>

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

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 19 октября 2019 

$(function(){


 var data = '<?xml version="1.0" encoding="UTF-8"?><flightInfo><Date>02OCT19</Date><Flight> VA 1429 </Flight><Depart>Sydney</Depart><Arrive>Cairns</Arrive><Boarding>Gate 35 At 1855</Boarding><Carrier>Virgin Australia</Carrier></flightInfo>'   
    
//Parse the givn XML
var xmlDoc1 = $.parseXML( data ); 
    
var $xml1 = $(xmlDoc1);

  // Find Person Tag
var $flightInfo = $xml1.find("flightInfo");


$flightInfo.each(function(){
   
    var Date = $(this).find('Date').text(),
        Depart = $(this).find('Depart').text(),
        Arrive = $(this).find('Arrive').text() ;
    
    $("#data" ).append('<li>' + Date + ' - ' + Depart+  ' - ' + Arrive + '</li>');
    
});
     
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="data"></ul>

Прежде всего вам необходимо проанализировать данные в объекте xml, как показано ниже, после чего вы можете их прочитать. попробуйте следующее решение. 

<ul id="data"></ul>
<script>
$(function(){


 var data = '<?xml version="1.0" encoding="UTF-8"?><flightInfo><Date>02OCT19</Date><Flight> VA 1429 </Flight><Depart>Sydney</Depart><Arrive>Cairns</Arrive><Boarding>Gate 35 At 1855</Boarding><Carrier>Virgin Australia</Carrier></flightInfo>'   

//Parse the givn XML
var xmlDoc1 = $.parseXML( data ); 

var $xml1 = $(xmlDoc1);

  // Find Person Tag
var $flightInfo = $xml1.find("flightInfo");


$flightInfo.each(function(){

    var Date = $(this).find('Date').text(),
        Depart = $(this).find('Depart').text(),
        Arrive = $(this).find('Arrive').text() ;

    $("#data" ).append('<li>' + Date + ' - ' + Depart+  ' - ' + Arrive + '</li>');

});

});
</script>

проверьте демо:

http://jsfiddle.net/ru92p4en/

0 голосов
/ 19 октября 2019 
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadDoc()">Get flight 
information</button>
<br><br>
<table id="demo"></table>

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

</body>
</html>

Я думаю, это должно помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...