从 XML 获取数据并在 HTML 上显示 - 输入变量答案

【问题标题】：GET DATA from XML and show on HTML - Input variable从 XML 获取数据并在 HTML 上显示 - 输入变量
【发布时间】：2021-09-29 09:28:21
【问题描述】：

我正在尝试从 xml 文件中获取数据并在输入中显示，但我需要从输入中获取参数。

只需单击按钮，此代码就可以工作，但它会返回带有参数 'sbbr'

的 xml 文件

这是我的代码：

<script>
  var icaocode = 'sbbr'
  var client;
  if (window.XMLHttpRequest) {
    client = new XMLHttpRequest();
  } else {
    client = new ActiveXObject("Microsoft.XMLHTTP");
  }

  client.open('GET', 'https://mywebsite.com/api/?icaoCode=' + icaocode, true);

  function buscarFunction() {

    var xmlDoc = client.responseXML;

    var heliponto = xmlDoc.getElementsByTagName("aisweb");
    for (i = 0; i < heliponto.length; i++) {
      data = heliponto[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
      city = heliponto[i].getElementsByTagName("city")[0].childNodes[0].nodeValue;
      org = heliponto[i].getElementsByTagName("rmkText")[0].childNodes[0].nodeValue;
    }

    document.getElementById('nome').value = data;
    document.getElementById('cidade').value = city;
    document.getElementById('org').value = org;
  }
  client.send();
</script>
<input id="icao"><button type="button" onclick="buscarFunction()">Buscar</button><Br>
<input id="nome"><br>
<input id="cidade"><br>
<input id="org">

我需要从这里获取这个参数：

<input id="icao"><button type="button" onclick="buscarFunction()">Buscar</button>

但没有填充变量 icaocode，我试过这个：

var icaocode = document.getElementById('icao').value;
client.open('GET', 'https://mywebsite.com/api/?icaoCode=' + icaocode, true);

【问题讨论】：

尝试记录“-”的值 + document.getElementById('icao').value +“-”;看看它有什么，它非常简单。
我可能会有一个解决方案，但我宁愿先测试它，而您没有为此提供任何方法！ stackoverflow.com/help/minimal-reproducible-example

标签： javascript html xml api

【解决方案1】：

在所有元素完成渲染后，尝试将<script> 放在<body> 标记下方。我认为正在发生的事情是 document.getElementById('icao') 返回 null 因为还没有 ID 为 icao 的元素。

【讨论】：

【解决方案2】：

我修复了，找到了解决方案。只需添加函数onload 并将所有代码放入主函数中，如下所示：


<input id="icao"><button type="button" onclick="buscarFunction()">Buscar</button><Br>
<input id="nome"><br>
<input id="cidade"><br>
<input id="org">
<script>

  function buscarFunction() {
    var icaocode = document.getElementById('icao').value;
    var client;
    if (window.XMLHttpRequest) {
      client = new XMLHttpRequest();
    } else {
      client = new ActiveXObject("Microsoft.XMLHTTP");
    }

    client.open('GET', 'https://mywebsite.com/api/?icaoCode=' + icaocode, true);
    client.send();
    client.onload = function () {
      var xmlDoc = client.responseXML;

      var heliponto = xmlDoc.getElementsByTagName("aisweb");
      for (i = 0; i < heliponto.length; i++) {
        data = heliponto[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
        city = heliponto[i].getElementsByTagName("city")[0].childNodes[0].nodeValue;
        org = heliponto[i].getElementsByTagName("rmkText")[0].childNodes[0].nodeValue;
      }

      document.getElementById('nome').value = data;
      document.getElementById('cidade').value = city;
      document.getElementById('org').value = org;
};

  }

</script>

然后存储来自输入的变量：

var icaocode = document.getElementById('icao').value;

【讨论】：