javascript - 使用 Javascript 未定义 json Flickr Api

Question

。您好，我正在尝试完成 this tutorial但他们在说明中遗漏了一些关键部分。我已经找到了一些缺失的内容，但无法插入照片搜索 API 返回的 flickr 图像作为背景。尽管我可以看到我需要的数据，但我不断收到 ReferenceError: jsonFlickrApi is not Defined 作为控制台错误。如果有人能解释我做错了什么，我将不胜感激，谢谢!

JS:

document.onreadystatechange = function(){
    if(document.readyState === "interactive"){
        var weatherData = {
            city:               document.querySelector("#city"),
            weather:            document.querySelector("#weather"),
            temperature:        document.querySelector("#temperature"),
            temperatureValue:   0,
            units:              "°F"
        };

        function getLocationAndWeather(){
            if (window.XMLHttpRequest){
                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", function() {
                    console.log("Processing weather info...");
                    var response = JSON.parse(xhr.responseText);

                    console.log(response);
                    var position = {
                        latitude:   response.latitude,
                        longitude:  response.longitude
                    };
                    var cityName = response.city;
                    if(cityName =="Earth"){
                        /*IP-based location detection failed.*/
                        /*Ask user where he or she lives*/
                        getWeatherForLocation();
                    } else {
                    var weatherSimpleDescription    = response.weather.simple;
                    var weatherDescription          = response.weather.description;
                    var weatherTemperature          = Math.round(response.weather.temperature * 9/5 + 32);

                    weatherData.temperatureValue = weatherTemperature;

                    loadBackground(position.latitude, position.longitude, weatherSimpleDescription);

                    weatherData.city.innerHTML          = cityName;
                    weatherData.weather.innerHTML       = ", " + weatherDescription;
                    weatherData.temperature.innerHTML   = weatherTemperature + weatherData.units;
                    console.log("Finished proessing and displaying weather info...");

                    }
                }, false);

                xhr.addEventListener("error", function(err){
                    alert("Could not complete the request");
                }, false);

                xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=ab2497c49afeabeff924fb4bd2288ee5&units=metric", true);
                xhr.send();
                console.log("Requesting weather info...");
            } else { 
                alert("Unable to fetch location and weather data.");
            }
        }

        function getWeatherForLocation(){
            var location = prompt("Your location could not be detected automatically, can you tell me where you live?");
            if (location != null){
                document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
                document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");

                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", function() {
                    var response = JSON.parse(xhr.responseText);

                    console.log(response);
                    var position = {
                        latitude: response.latitude,
                        longitude: response.longitude
                    };
                    var lat = response.latitude;
                    var lon = response.longitude;
                    var cityName = response.city;

                    var weatherSimpleDescription = response.weather.simple;
                    var weatherDescription = response.weather.description;
                    var weatherTemperature = Math.round(response.weather.temperature);
                    weatherData.temperatureValue = weatherTemperature;

                    weatherData.city.innerHTML = cityName;
                    weatherData.weather.innerHTML =  ", " + weatherDescription;
                    weatherData.temperature.innerHTML = weatherTemperature + weatherData.units; 

                }, false);

                xhr.addEventListener("error", function(err){
                    alert("Could not complete the request");
                }, false);



                xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getweatherforlocation.php?owapikey=45713cc0d54c4bfa1c7efbbdbd1c6c2b&units=metric&location=" + location, true);
                xhr.send();
            }
            else{
                alert("Unable to fetch the location and weather data.");
            }                       
        }

        function loadBackground(lat, lon, weatherTag) {
            var script_element = document.createElement('script');

            script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=0677de6a559772c8cb27dd22219dfa0c&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json";

            document.getElementsByTagName('head')[0].appendChild(script_element);
        }

        function jsonFlickrApi(data){
                if (data.photos.pages > 0){
                    var photo = data.photos.photo[0];
                    console.log("Photo data: " + photo);
                    document.querySelector("weather-web-app").style.backgroundImage = "url('" + photo.url_l + "')";
                    document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
                }
                else{
                    document.querySelector("weather-web-app").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
                    document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
                }
            }

            getLocationAndWeather();

        }
}

Answer 1

首先，该行有一个拼写错误:

script_element.src = "...&accuracy=1" +  + &sort=relevance...";

其次，Flickr api 使用 JSONP，据我所知，这需要在接收方定义回调函数。由于您将此函数放入监听器并置于条件中，因此它将是未定义的。

把它放在外面:

document.onreadystatechange = function() {
    ...
}
function jsonFlickrApi() {...}