json Flickr Api undefined using Javascript
json Flickr Api undefined using Javascript
.您好,我正在尝试完成本教程,但他们在说明中遗漏了一些关键部分。我已经找出了一些缺失的内容,但我无法插入照片搜索 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();
}
}
首先,您在该行中有一个拼写错误:
script_element.src = "...&accuracy=1" + + &sort=relevance...";
其次,正如我所看到的,使用 JSONP 的 Flickr api,它需要在接收器端定义回调函数。由于您将此函数放入侦听器和条件中,因此它将是未定义的。
把它放在外面:
document.onreadystatechange = function() {
...
}
function jsonFlickrApi() {...}
好的,意识到它是什么。
弗利克不喜欢
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";
具体来说,它不喜欢我的 weatherTag 变量。
所以
script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=0677de6a559772c8cb27dd22219dfa0c&lat=" + lat + "&lon=" + lon + "&accuracy=1" + + "&sort=relevance&extras=url_l&format=json";
而是工作正常。
谢谢!
相关文章:
- Dropdownlist using javascript
- Twitter api using Javascript
- fetch data from db using javascript & php
- MVC3 C# Razorview Printing a PartialView using Javascript
- Using Dashboard APIs or Frameworks using Javascript/JQuery
- Dynamic about: URLs using JavaScript Code Modules (XPCOMUtil
- using Javascript HTML Formular
- UIWebview open URL in mobile safari using javascript
- HTML5 Pop using Javascript form validation
- Google analytics API using javascript
- json Flickr Api undefined using Javascript
- jade using javascript variable (mongo model)
- facebook connect using javascript,html
- Duplex WCF Service call using javascript (AJAX)
- Using Javascript for iFrame src URL
- ReactJs Modal Using Javascript and CSS
- Using Javascript Window.open
- Send Email using JavaScript & PHP
- Simulate top scroll using javascript setInterval & clear
- google api using javascript