Question

调用openweather API。当我将URL输入浏览器时，我可以看到JSON对象。但是我的下面的ajax不允许在我的HTML中出现任何内容。即使我想document.write整个json对象，我也不能。我可以输出lat和long只是找到地理位置正常工作。不确定这段代码有什么问题。

这是HTML：

<body>
  <div class="container">
  <div class="col-lg-12 header">
    <h1>My Location</h1>
  </div>
    <div class="row text-center box">
      <div class="col-lg-12" id="data">Lat Long</div>
    </div>
  </div>
</body>

这是JS：

$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(main); 
  }
});
function main(position){
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  var api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat      + "&lon=" + long + "&appid=[redacted key]";
  $.ajax({
    dataType: 'json',
    url: api,
    success: function(data) {
        city = data.name;
        $("#data").html(city);
    }
  });
}

Answer 1

问题不在你的ajax电话中。

您的代码似乎与硬编码坐标相当不错，并且除Chrome之外的所有其他浏览器上也以当前形式运行。

如果您想在较新版本的Google Chrome上使用地理位置，则您的主机必须是安全主机（HTTPS）。

Chrome警告：

在不安全的起源上不推荐使用
getCurrentPosition（）和watchPosition（）。要使用此功能，您应该考虑将应用程序切换到安全的来源，例如HTTPS。有关详细信息，请参阅https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。

Answer 2

尝试$.getJson而不是$.ajax：$.getJSON( { dataType: 'jsonp', url: api, success: function(data) { city = data.name; $("#data").html(city); }

在HTML中，请务必添加jquery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> <script src="a.js"></script> //无论你的js文件是什么命名

在不修改代码的情况下，页面要求访问我的位置，然后显示我当前的城市。我不确定它应该输出什么。您对输出的期望是什么？

一切都有效，但Ajax

2 个答案: