如何编写AJAX调用以获取XML文件？

Question

我需要编写一个带有“获取航班信息”按钮的网页。当用户单击此按钮时，编写一个AJAX调用以获取您在问题1中编写的XML文件，将XML解析为Javascript对象，然后将Javascript对象完全显示在网页上如下：

到目前为止是我的代码。我对此非常陌生，所以请放轻松吧！：

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>

Answer 1

0
投票

我认为这应该有所帮助。

Answer 2

$(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/

如何编写AJAX调用以获取XML文件？

问题描述投票：1回答：2

2个回答

最新问题

如何编写AJAX调用以获取XML文件？

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2