XMLHttpRequest與多個查詢

Question

我有一個接口，需要用戶輸入郵政編碼，然後我會根據輸入的zip從遠程站點查詢經度和緯度，然後根據以前查詢的經度和緯度查詢一些人口信息。我需要3個XMLhttpRequest（）來查詢三個不同的網站。每個查詢將基於先前查詢的數據。我認爲在我的代碼中可能存在一些回調問題，我不知道如何解決它。

<input type="submit" value="Get City" onclick="getInfo()"> 

    <script> 
    function getInfo(getGeoCode) { 
     var zipCode = document.getElementById("inputtext").value 

     var xmlReq = new XMLHttpRequest(); 
     xmlReq.open("GET", "http://api.zippopotam.us/us/" + zipCode, true); 
     xmlReq.onreadystatechange = function() { 
      if (xmlReq.readyState == 4) { 
       var temp = JSON.parse(xmlReq.responseText); 
       var lat = temp.places[[0]].latitude ; 
       var logt = temp.places[[0]].longitude; 
       getGeoCode(lat, logt); 
      }; 
     }; 

     xmlReq.send(); 
    } 

    function getGeoCode(lat,logt,getpop) { 
     var nereq = new XMLHttpRequest(); 
     nereq.open("GET", "https://data.fcc.gov/api/block/find?&latitude=" + lat + "&longitude=" + logt + "&showall=false&format=json", true); 
     nereq.onreadystatechange = function() { 
      if (nereq.readyState == 4) { 
       var temp2 = JSON.parse(nereq.responseText); 
       var stateCode = temp2.State.FIPS; 
       var contyCode = temp2.County.FIPS; 
       getpop(stateCode, contyCode); 
      }; 
     }; 
     nereq.send(); 
    } 

    function getpop(stateCode, contyCode) { 
     var nereq2 = new XMLHttpRequest(); 
     nereq2.open("GET", "http://api.census.gov/data/2010/sf1?get=P0010001&for=county:" + contyCode + "&in=state:" + stateCode, true); 
     nereq2.onreadystatechange = function() { 
      if (nereq2.readyState == 4) { 
       var temp3 = JSON.parse(nereq.responseText); 
       document.getElementById("fs").innerHTML = temp3; 
      }; 
     }; 
     nereq2.send(); 
    } 
</script> 

Answer 1

您的函數有與您調用的函數名稱衝突的參數，所以它們不能再被訪問。

例如，getGeoCode有一個參數叫做getpop。當調用getpop時，它不會調用該名稱的函數，但會嘗試調用getpop參數引用的引用。特別是因爲你沒有在這個參數表中傳遞任何東西，所以很可能是錯誤的。

的解決方法就是刪除getInfo()的getGeoCode參數和getpop參數從getGeoCode()：

<input type="submit" value="Get City" onclick="getInfo()"> 

    <script> 
    function getInfo() { 
     var zipCode = document.getElementById("inputtext").value 

     var xmlReq = new XMLHttpRequest(); 
     xmlReq.open("GET", "http://api.zippopotam.us/us/" + zipCode, true); 
     xmlReq.onreadystatechange = function() { 
      if (xmlReq.readyState == 4) { 
       var temp = JSON.parse(xmlReq.responseText); 
       var lat = temp.places[[0]].latitude ; 
       var logt = temp.places[[0]].longitude; 
       getGeoCode(lat, logt); 
      }; 
     }; 

     xmlReq.send(); 
    } 

    function getGeoCode(lat,logt) { 
     var nereq = new XMLHttpRequest(); 
     nereq.open("GET", "https://data.fcc.gov/api/block/find?&latitude=" + lat + "&longitude=" + logt + "&showall=false&format=json", true); 
     nereq.onreadystatechange = function() { 
      if (nereq.readyState == 4) { 
       var temp2 = JSON.parse(nereq.responseText); 
       var stateCode = temp2.State.FIPS; 
       var contyCode = temp2.County.FIPS; 
       getpop(stateCode, contyCode); 
      }; 
     }; 
     nereq.send(); 
    } 

    function getpop(stateCode, contyCode) { 
     var nereq2 = new XMLHttpRequest(); 
     nereq2.open("GET", "http://api.census.gov/data/2010/sf1?get=P0010001&for=county:" + contyCode + "&in=state:" + stateCode, true); 
     nereq2.onreadystatechange = function() { 
      if (nereq2.readyState == 4) { 
       var temp3 = JSON.parse(nereq.responseText); 
       document.getElementById("fs").innerHTML = temp3; 
      }; 
     }; 
     nereq2.send(); 
    } 
</script>