如何编写 AJAX 调用来获取 XML 文件？
我需要编写一个带有“获取航班信息”按钮的网页。当用户点击这个按钮时，编写一个 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>
繁星coding2回答
-
人到中年有点甜
$(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 XMLvar xmlDoc1 = $.parseXML( data ); var $xml1 = $(xmlDoc1); // Find Person Tagvar $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 XMLvar xmlDoc1 = $.parseXML( data ); var $xml1 = $(xmlDoc1); // Find Person Tagvar $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/ -
Helenr
<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>我认为这应该有所帮助。
随时随地看视频慕课网APP
相关分类
JavaScript