首頁猿問如何編寫 AJAX 調用來獲取...

如何編寫 AJAX 調用來獲取 XML 文件？

JavaScript

繁星coding 2021-11-25 19:51:25

我需要編寫一個帶有“獲取航班信息”按鈕的網頁。當用戶點擊這個按鈕時，編寫一個 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>

查看完整描述

2 回答

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

$(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>');

});

首先，您需要在 xml 對象中解析您的數據，如下所示，然后您可以讀取它。嘗試以下解決方案。

$(function(){

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

反對回復 2021-11-25

Helenr

TA貢獻1780條經驗獲得超4個贊

<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>

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>

我認為這應該有所幫助。

反對回復 2021-11-25

2 回答
0 關注
176 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何編寫 AJAX 調用來獲取 XML 文件？

如何編寫 AJAX 調用來獲取 XML 文件？

2 回答

添加回答