【问题标题】:Having trouble with $.get in JavaScript在 JavaScript 中使用 $.get 时遇到问题
【发布时间】:2016-11-21 04:06:04
【问题描述】:

我是 JavaScript 的新手。现在我解决了这个问题,我遇到了一个非常奇怪的错误。我正在构建一个应用程序来显示您所在位置的当前天气,为此我需要对天气数据进行 API 调用。我从here 获得天气数据,起初,我的代码正在运行并获取当地天气(对于给定的纬度和经度)。但是,我正在对代码进行编辑以添加功能,但我的代码突然停止工作。我试图修复它,但我很困惑,我不知道我坏了什么。希望大家帮忙!!

这是我的参考代码:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        lat = position.coords.latitude;
        long = position.coords.longitude;
        console.log(lat);
        $.get('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=00d71b03a3c50910d8f4f0ea51703bb5', function(data) {
            console.log(data);
            if(lat == 300 || long == 300) {
                alert("Enable your location to see how the weather is");
            } else {
                $("#location").text(data.name);
                var weather = data.weather[0].description;
                $("#weather").text(weather);
                temp = Math.round((data.main.temp - 273.15) * 10) / 10.0;
                $("#temperature").text(temp + "\u00B0 C");
                var icon = data.weather[0].icon;
                $("#picture").attr("src", "http://openweathermap.org/img/w/" + icon + ".png");
            } 
        });
    });
};

我在 API 调用下方放置了 console.log(data) 以查看发生了什么,但它没有输出任何内容。很困惑,请帮忙!

【问题讨论】:

  • 如果$.get 没有返回任何内容,则问题出在其他地方。$.get 应该返回请求的结果。这里的数据应该是data.data,因为您调用的是结果data.
  • 您的代码对我有用。我正在使用 jquery 在 document.ready 事件中本地运行它。但是,它在堆栈 sn-p 上不起作用。你在什么环境下运行?
  • 是的..我错了..有一段时间没有只使用 jQuery..习惯于 IHttpService on angular..似乎它确实会自动返回 result.data 那里..
  • 取决于浏览器,如果您的网站是“https”并且您在“http”上请求天气数据,那么它将作为“混合模式内容”阻止它。我知道至少在 Chrome 上你可能会遇到这个问题。只是在黑暗中拍摄
  • 你知道 API 有限制......例如,Do not send requests more then 1 time per 10 minutes from one device/one API key

标签: javascript jquery ajax syntax api-design


【解决方案1】:

我在 firefox 中运行这段代码并从 api.openweathermap.org 获取 json 数据

检查您的浏览器是否支持 navigator.geolocation 并允许共享您的位置。


以下 sn-p 覆盖 navigator.geolocation.getCurrentPosition 并使用 .bind 调用内部 fn 以强制其触发。

$(document).ready(function() {
    var appId = "00d71b03a3c50910d8f4f0ea51703bb5";
    if (navigator.geolocation) {

        // TODO: remove this for production. DEMO/DEBUG usage
        navigator.geolocation.getCurrentPosition = function(fn)  {
            fn.bind(this, { coords : { latitude : 51.507351, longitude : -0.127758 }})();
        }; 

        navigator.geolocation.getCurrentPosition(function(position) {
            try {
          
                lat = position.coords.latitude;
                long = position.coords.longitude;
    
                $.get('//api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=' + appId, function(data) {
                    console.log("data := %o", data);        
    
                    if(lat == 300 || long == 300) {
                        alert("Enable your location to see how the weather is");
                    } else {
                        $("#location").text(data.name);
                        var weather = data.weather[0].description;
                        $("#weather").text(weather);
                        temp = Math.round((data.main.temp - 273.15) * 10) / 10.0;
                        $("#temperature").text(temp + "\u00B0 C");
                        var icon = data.weather[0].icon;
                        $("#picture").attr("src", "//openweathermap.org/img/w/" + icon + ".png");
                    } 
                });
            } catch(error) {
                console.log("err := %o", error);
            }            
        });
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="location">Location</label><span id="location"></span>
<label for="weather">Weather</label><div id="weather"></div>
<label for="temperature">Temperature (F)</label><span id="temperature"></span>
<img id="picture" src="" width="200px" height="200px" />

【讨论】:

  • 我确保我的位置已打开并且我使用的网站支持 navigator.geolocation,并且该代码 sn-p 不起作用 :(( 感谢您抽出宝贵时间尝试帮助我不过!
  • 因此,您的问题的范围是getCurrentPosition(从传感器读取......您可以在网络工具> 更多工具> 传感器中模拟)或某些东西正在拦截您的呼叫(可能是浏览器扩展问题)
  • @BrettCaswell 谢谢,非常感谢您的帮助。我会在早上尝试这些,看看它是否有效:)
  • @lww515 话虽如此,您的问题很可能与传感器考虑有关..按照我提到的步骤在您的网络工具/开发工具中覆盖地理位置传感器..
  • 还要注意在$.get调用和img.src分配的url中删除了http:。通过删除url中的协议,它将使用当前请求的协议..
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-09-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多