如何在我的 javascript AJAX 代码中显示所选国家/地区的城市名称和人口？

Posted 2023-03-05

【中文标题】如何在我的 javascript AJAX 代码中显示所选国家/地区的城市名称和人口？

【英文标题】：How do I display the city names and population of a selected country in my javascript AJAX code?

【发布时间】：2021-09-03 19:15:34

【问题描述】：

我正在创建一个显示国家/地区名称的网页。选定的国家应在表格中显示 10 个最大城市的名称和人口。到目前为止，当我选择国家时，它只显示名称而没有其他信息。

应显示每个给定国家/地区前 10 大城市的名称和人口。

这是我的完整代码；

 "use strict;"
  
    function displayUSAInfo() 
      document.getElementById("country_name").innerhtml="USA";
      const xhttp = new XMLHttpRequest();
      xhttp.onload = function() 
        document.getElementById("country_data").innerHTML = this.responseText;  
        const text=this.responseText;
        // const obj = '"City":"", "Population":""';

         const arry=JSON.parse(text);
        //  document.getElementById("country_data").innerHTML = arry[0];
        //  let table="<tr><th>City</th><th>Population</th></tr>";

        //  table+="<tr><td>" + "city1" +"</td><td>" + "population1"+ "</td></tr>";
      //   for (let i = 0; i < obj.length; i++)  
      //     table += "<tr><td>" + obj.City + "</td><td>" + obj.Population + "</td></tr>";
      //   
        //  docoument.getElementById("country_data").innerHTML = table;
      
      xhttp.open("GET", "usa.txt", true);
      xhttp.send();
    
       
     function displayCanadaInfo()    
      document.getElementById("country_name").innerHTML="Canada";  
      const xhttp = new XMLHttpRequest();
      xhttp.onload = function() 
      if (this.readyState == 4 && this.status == 200) 
        document.getElementById("country_data").innerHTML = this.responseText;
      
      
      xhttp.open("GET", "canada.txt", true);
      xhttp.send();
    

     function displayRussiaInfo()      
       document.getElementById("country_name").innerHTML="Russia";
       const xhttp = new XMLHttpRequest();
      xhttp.onload = function() 
        document.getElementById("country_data").innerHTML = this.responseText;
      
      xhttp.open("GET", "russia.txt", true);
      xhttp.send();
    
     
     function displayMexicoInfo()      
       document.getElementById("country_name").innerHTML="Mexico";
       const xhttp = new XMLHttpRequest();
      xhttp.onload = function() 
        document.getElementById("country_data").innerHTML = this.responseText;
      
      xhttp.open("GET", "mexico.txt", true);
      xhttp.send();
    
     
  </script>

<div id="content">
  <header>
      <h1><strong>Using AJAX</strong></h1>
  </header>
  <br>
  <main>
    <div class="country_selection">
      <h3>Select a country to get data on their populous cities: </h3>
        <form>
          <input type="radio" name="country" value="usa" onclick="displayUSAInfo()"> USA
          <input type="radio" name="country" value="canada" onclick="displayCanadaInfo()"> Canada
          <input type="radio" name="country" value="russia" onclick="displayRussiaInfo()"> Russia
          <input type="radio" name="country" value="mexico" onclick="displayMexicoInfo()"> Mexico
        </form>
        <div id="country_name"></div>
        <table id="country_data"></table>
    </div>

【问题讨论】：

尽可能使用原则 DRY。不要重复自己。我建议动态生成文件名，而不是为每个国家/地区提供不同的功能。

有什么问题？您是否在控制台中遇到错误？

我从控制台收到此错误；从源“null”访问“file:///C:/Users/USER/Desktop/CS213/usamexico.txt”的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、数据，铬，铬扩展，铬不受信任，https。我该如何解决这个问题。？

这是一个 CORS 问题。您应该设置一个localhost server 并通过服务器测试您的 html 文件，或者将其上传到您的站点并进行测试。总之，发送请求时应该使用http协议而不是file。

【参考方案1】：

据我所知，您的 http 请求结构正确，没有太多上下文。这是您的代码的更完整版本，带有onerror 函数。

您可能会遇到的最常见错误是您将其作为文件进行测试，而不是使用服务器或localhost。因此，协议是file://而不是http，并且CORS阻止了这个请求。检查您的浏览器控制台了解更多信息。

第二个错误来源是你必须确保文件确实存在于它被搜索的路径中。这是您的script.js 所在的同一目录，因为您使用的是相对路径。

不管怎样，代码如下：

"use strict;"

function display_country_info()
  let country_name = window.event.target.value;
  document.getElementById("country_name").innerHTML = country_name[0].toUpperCase() + country_name.substr(1,);
  const xhttp = new XMLHttpRequest();
  xhttp.onload = () => 
    document.getElementById("country_data").innerHTML = this.responseText;
  
  xhttp.onerror = () => 
    document.getElementById("country_data").innerHTML = "<b style='color: red;'>There was an error. Maybe the file was not found, or you are not using the http protocol.</b>";
  
  xhttp.open("GET", country_name+".txt", true);
  xhttp.send();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="script.js" defer></script>
    <title>Document</title>
</head>
<body>
<div class="country_selection">
  <h3>Select a country to get data on their populous cities: </h3>
    <form>
      <input type="radio" name="country" value="usa" onclick="display_country_info()"> USA
      <input type="radio" name="country" value="canada" onclick="display_country_info()"> Canada
      <input type="radio" name="country" value="russia" onclick="display_country_info()"> Russia
      <input type="radio" name="country" value="mexico" onclick="display_country_info()"> Mexico
    </form>
    <div id="country_name"></div>
    <table id="country_data"></table>
</div>
    
</body>
</html> 

【参考方案2】：

这将对您有所帮助，您可以随意编辑它。由简单的 javascript 完成。

<html>
<body>
<br><b> Choose your favroite season: </b><br>
<input type="radio" name="season" id="summer" value="Summer"> Summer <br> 
<input type="radio" name="season" id="winter" value="Winter"> Winter <br> 
<input type="radio" name="season" id="rainy" value="Rainy"> Rainy <br>
<input type="radio" name="season" id="autumn" value="Autumn"> Autumn 
<br><br>     

<button type="button" onclick=" checkButton()"> Submit </button> 
    
<h3 id="disp" style= "color:green"> </h3>
<h4 id="error" style= "color:red"> </h4>
</body>

<script>
    function checkButton()   
            var getSelectedValue = document.querySelector( 
                'input[name="season"]:checked'); 
              
            if(getSelectedValue != null)  
                document.getElementById("disp").innerHTML 
                    = getSelectedValue.value 
                    + " season is selected"; 
             
            else  
                document.getElementById("error").innerHTML 
                    = "*You have not selected any season"; 
             
          
    </script> 
</html>