2016-05-19 28 views
0

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

您還沒有傳遞第三個參數中'getGeoCode' ..只要使用'功能getGeoCode(LAT,logt) ''getpop'在全局環境下..你不能調用undefined' – Rayon

+0

看看Promises和[fetch api](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) –

回答

0

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

例如,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> 
+0

但問題是,當我調試到var temp2 = JSON.parse(nereq.responseText);它給了我一個運行時錯誤 – user3491987

+0

然後請編輯該問題,把錯誤和響應數據的細節。從您的評論,這聽起來像你從服務器收到的響應是無效的JSON,但沒有細節,這只是猜測 – Rhumborl

+0

是的,可能是錯誤的API,我會檢查..謝謝 – user3491987