如何在 html 中使用 AJAX 解析 XML？答案

【问题标题】：How to parse XML using AJAX in html?如何在 html 中使用 AJAX 解析 XML？
【发布时间】：2019-11-12 15:22:23
【问题描述】：

我正在尝试使用 AJAX 解析 XML。但是有一些错误我说我的“html未定义”

基本上我想做的是从我的 XML 代码中解析特定数量的数据并使用 HTML 网页显示它。以下是我尝试运行脚本时控制台中的错误列表

    at  displayCountrylist (test2.html:136)
    at handleStatusSuccess (test2.html:61)
    at readyStateChangeHandler (test2.html:32)
    at XMLHttpRequest.xhttp.onreadystatechange (test2.html:16)

我尝试尽一切努力进行调试，但仍然失败。有人帮忙吗？

<html>
<script>
  function makeAjaxQueryCountrylist()
  {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() 
    {
      readyStateChangeHandler(xhttp);
    };
    xhttp.open("GET", "A3_CtryData_dtd_Sample.xml", true);
    xhttp.send();
  }

   function readyStateChangeHandler(xhttp)
   {
     if (xhttp.readyState == 4)
     {

      if(xhttp.status == 200)
      {

        handleStatusSuccess(xhttp);
      }else
      {

        handleStatusFailure(xhttp);
      }
     }
   }

  function handleStatusFailure(xhttp){


    var displayDiv = document.getElementById("display");

    displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
  }

  function handleStatusSuccess(xhttp)
  {
    var xml = xhttp.responseXML;
    var countrylistObj = parseXMLCountrylist(xml);

    displayCountrylist(countrylistObj);
  }
  function parseXMLCountrylist(xml)
  {
    var countrylistObj = {};
    var countrylistElement = xml.getElementsByTagName("CountryList")[0];

    var recordElementList = countrylistElement.getElementsByTagName("CountryRecord"); 
    countrylistObj.recordList = parseRecordElementList(recordElementList);

    return countrylistObj;
  }

  function parseRecordElementList(recordElementList)
  {
    var recordList = [];

    for(var i=0; i < recordElementList.length; i++)
    {
      var recordElement = recordElementList[i];

      var recordObj = parseRecordElement(recordElement);

      recordList.push(recordObj);
    }

    return recordList;
  }  


  function parseRecordElement(recordElement)
  {

    var recordObj = {};

    var countrycodeElement = recordElement.getElementsByTagName("country-code")[0];
    recordObj.countrycode = Number(countrycodeElement.textContent);

    var nameElement = recordElement.getElementsByTagName("name")[0];
    recordObj.name = nameElement.textContent;

    var alpha2Element = recordElement.getElementsByTagName("alpha-2")[0];
    recordObj.alpha2 = alpha2Element.textContent;

    var alpha3Element = recordElement.getElementsByTagName("alpha-3")[0];
    recordObj.alpha3 = alpha3Element.textContent;

    var capitalcityElement = recordElement.getElementsByTagName("capital-city")[0];
    recordObj.capitalcity = capitalcityElement.textContent;
    return recordObj;
  }

  function displayCountrylist(countrylistObj)
  {
    for(var i=0; i < countrylistObj.recordList.length; i++)
    {
      var recordObj = countrylistObj.recordList[i];


      html += "country-code: " + recordObj.countrycode;
      html += "<br />";
      html += "name: " + recordObj.name;
      html += "<br />";
      html += "alpha-2: " + recordObj.alpha2;
      html += "<br />";
      html += "alpha-3: " + recordObj.alpha3;
      html += "<br />";
      html += "capital-city: " + recordObj.capitalcity;
      html += "<br />";
    }
    var displayDiv = document.getElementById("display1");
    displayDiv.innerHTML = html;
  }
  </script>
<body>

<button onClick="makeAjaxQueryCountrylist()"> Region Info I (Format: region-fmt-1.xsl)</button>

<br /><br />

<div id="display1">
</div>
</body>

</html>

我的 XML 代码没有任何问题，所以这里肯定有一些错误。

【问题讨论】：

在html += "country-code: " + recordObj.countrycode;这行之前你必须定义let html = '';
你是对的！谢谢！
很高兴我能帮上忙，现在我正在回答，所以您可以将我的回答标记为已接受。

标签： javascript html ajax xml

【解决方案1】：

您收到错误 html is not defined 是因为您使用 html 变量而没有声明它。所以，在行之前

html += "country-code: " + recordObj.countrycode;

你必须写

let html = '';

【讨论】：