通过 javascript 输出 XMLHttpRequest 到 DIV

Output XMLHttpRequest to DIV via javascript

本文关键字：DIV XMLHttpRequest 输出 javascript 通过      更新时间：2023-09-26

我正在尝试通过纯JS中的API调用列出本地交通系统的车站名称。我想遍历站名（其中 45 个）并将它们输出到 div id="stationDiv" 内的列表

我得到的只是div 中列出的 45 个空对象元素的列表。我似乎无法正确输出循环。

XML 文件的示例

<root>
<uri>
<![CDATA[ http://api.bart.gov/api/stn.aspx?cmd=stns ]]>
</uri>
<stations>
<station>
<name>12th St. Oakland City Center</name>
<abbr>12TH</abbr>
<gtfs_latitude>37.803664</gtfs_latitude>
<gtfs_longitude>-122.271604</gtfs_longitude>
<address>1245 Broadway</address>
<city>Oakland</city>
<county>alameda</county>
<state>CA</state>
<zipcode>94612</zipcode>
</station>
//44 more station's below this

设置调用 API：

var URL ="http://api.bart.gov/api/stn.aspx?cmd=stns&key=MW9S-E7SL-26DU-VV8V"; //public key used
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",URL,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
if(xmlhttp.status == 200) {
    console.log("connection successful");
} else {
    console.log("server returned a status code of " + oHttp.status);
}

不工作的循环：

var x1=xmlDoc.getElementsByTagName("station");
function postNames(station) {
    var x = station.length;
    var n = 0;
    var element = document.getElementById('stationDiv');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + station[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}
postNames(x1);

提前感谢您，我面前打开了多本书和 20 个选项卡，但似乎无法正确输出。

纯JS只请。

试试这个...

var x1=xmlDoc.getElementsByTagName("station");
var postNames = function(station) {
    var x = station.length;
    var n = 0;
    var element = document.getElementById('stationDiv');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + station[n].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}
postNames(x1);
相关文章：