javascript - 如何自动化基于地理位置的 Json

Question

我是初学者，我有一个功能可以根据您的位置获取链接。

函数如下:

 
    <p id="demo"></p>

    <script>
    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
      }
     
      function showPosition(position) {
       x.innerHTML =  "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" +
        position.coords.longitude + "&units=metric&APPID=3d1523ca3f27251ddf055b1b26ed347f"
      }
       

    </script>

现在我正在尝试将此链接放入 get.Json 中，以便该网站将自动获取有关您所在地区天气的信息。问题是我无法让它工作。有人可以帮助我如何将链接自动放入 get.Json 中。

Answer 1

要从某些 Web API 端点获取数据，您需要使用一些 Ajax 请求 API。原生的是 XMLHTTPRequest , fetch() .

还有jQuery.ajax及其别名 $.post,$.get,$.getJSON 等

因此，只需使用您熟悉的 api 并将其添加到您的 showPosition 函数中即可。当相应的 api 的 promise 或事件回调被触发时，使用传递的数据来显示您的信息:

function showPosition(position) {
  let apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + 
               position.coords.latitude + 
               "&lon=" + position.coords.longitude + 
               "&units=metric&APPID=3d1523ca3f27251ddf055b1b26ed347f";

  //using fetch() api
  fetch(apiUrl).then(response=>response.json()).then(data=>{
    //use the returned data however you like
    //for instance show temperature
    x.innerHTML = data.main.temp;
  });

  //using XMLHttpRequest
  let req = new XMLHttpRequest();
  req.open("get",apiUrl);
  req.addEventListener('load',function(data){
    //use the returned data however you like
  });

  //using a library like jQuery
  jQuery.getJSON(apiUrl).then(function(data){
    //use the returned data however you like
  });
}

阅读异步操作并避免此类陷阱:

How do I return the response from an asynchronous call?

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference