Witam
Jaką technologią najlepiej jest pobierać dane poprzez API i wyświetlanie ich na stronie HTML z cykliczną aktualizacją?
0
0
jeśli raz na długi czas to zwykły ajax, jesli ma reagować na zmiany to websockety powinieneś stworzyć
0
pobieranie zmian co parę minut a możecie mi polecić jakieś rozwiązanie? Bo chciałbym pobierać pogodę z zewnetrznego serwera tak by wyświetlać na stronie.
0
No to tak, jak pisał @mr_jaro - skorzystaj z Ajax. Do tego jakiś timer w JavaScript, który co określony czas pobierze aktualne dane.
Co do Ajax'a - temat był poruszany całkiem niedawno - rzuć okiem na te wpisy: https://4programmers.net/Forum/1455802 oraz https://4programmers.net/Forum/1456545
0
Oki dzięki ale da się to zrobić bez użycia PHP?
0
Zasadniczo Ajax działa w oparciu o PHP (lub coś pokrewnego).
Aczkolwiek - skoro chcesz dane "pożyczyć" z innego portalu, to są szanse, że PHP będzie przez nich "załatwione", a Ty jedynie podepniesz się ze "swoją" częścią Ajax'a (czyli JS odpalanym po stronie klienta) i będziesz pobierać dane. Tak więc odpowiadając: tak, jest taka możliwość.
0
OK. Przypuśćmy że mamy taki kod
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function gettingJSON(){
document.write("jquery loaded");
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London&APPID=ee6596241130f193adf1ba90e625cc10",function(json){
document.write(JSON.stringify(json));
});
}
</script>
</head>
<body>
<button id = "getIt" onclick = "gettingJSON()">Get JSON</button>
</body>
</html>
Pobieramy dane po kliknięciu przycisku ale jak to teraz wyświetlić?
0
Taki bardzo ogólny sposób modyfikowania treści/zawartości strony przez JavaScript:
w kodzie strony umieszczasz takie coś:
<div>Jakaś zmienna treść: <span id="ELEMENT"></span></div>
a następnie modyfikujesz to poniższym skryptem JS:
document.getElementById("ELEMENT").innerHTML = "TRESC"
Skoro masz pobraną treść, to korzystając z powyższej wskazówki możesz dostosować przykład do swoich potrzeb.
ELEMENT to jest id przypisane do tagu (w moim przykładzie - SPAN), którego zawartość chcesz modyfikować.
"TRESC" to jest zawartość/treść, którą chcesz wstawić do modyfikowanego elementu.
Powinieneś to umieścić w funkcji, która jest uruchamiana w reakcji na kliknięcie. Albo - jak radziłem w poprzednim poście - skorzystać z jakiegoś timera, który będzie odpalany cyklicznie.
0
Ostatnio sam tworzyłem sobie appkę do pobierania pogody, na bazie:
https://codepen.io/freeCodeCamp/pen/bELRjV
Co prawda pobieranie zasobów ze strony odbywa się przy uruchomieniu strony, ale zasada działania jest ta sama. Najpierw zbiera sobie koordynaty (długość i szerokość geograficzną), a na podstawie tego ajaxem zbierasz i wyświetlasz na stronie to co dostajesz z API w postaci JSON, z parametru result
function getWeather(lat, lon) {
var urlString = api + lat + "&" + lon;
$.ajax({
url: urlString, success: function (result) {
$("#city").text(result.name + ", ");
$("#country").text(result.sys.country);
currentTempInCelsius = Math.round(result.main.temp * 10) / 10;
$("#temp").text(currentTempInCelsius + " " + String.fromCharCode(176));
$("#tempunit").text(tempUnit);
$("#desc").text(result.weather[0].main);
IconGen(result.weather[0].main);
}
});
}
Mój przykład
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(function(location) {
lat = location.coords.latitude;
lon = location.coords.longitude;
getWeather();
});
});
function getWeather(){
testAjax(function(output){
city = output.name;
kelvinTemp = output.main.temp;
weather = output.weather[0].main;
weatherIcon = output.weather[0].icon;
calcFahrenheintTemperature();
calcCelciusTemperature();
function testAjax(handleData){
$.ajax( {
url: `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=XXXXXXXXXXXXXXXXXXXXXXX`,
method: "GET",
dataType: "json",
success: function(data){
handleData(data);
}
});
};
BTW. Korzystamy z tego samego API, więc mogę podesłać Ci cały kod :) Ja to robiłem dla zabawy, więc korzystałem z koordynatów geograficznych miejscowości, natomiast na stronie tego API sugerują używać predefiniowanej listy ID miast, żeby było to bardziej precyzyjne, dlatego jak chcesz to wykorzystywać to chyba lepiej skorzystać z tych idków :)
0
Nadal mam problem z wyświetleniem informacji :/
0
Z tego linku nie pobierzesz danych, musisz mieć swoje ID:
cod 401
message "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."
Dlaczego nie chcesz skorzystać z metody $.ajax?
0
MatD napisał(a):
Z tego linku nie pobierzesz danych, musisz mieć swoje ID:
cod 401
message "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."Dlaczego nie chcesz skorzystać z metody $.ajax?
https://jsfiddle.net/gt1ofujm/22/ - nadal nie działa :/ nie wiem co robię źle
z $.ajax też próbuje i nie działa https://jsfiddle.net/gc3qot15/1/
Proszę pomożcie :/
0
http://openweathermap.org/appid tutaj masz jak wygenerować api key
0
-
Przerzuć kod JS do osobnego pliku i umieść pobieranie go na końcu dokumentu (przy zamykającym tagu body), a nie skrypt na początku (gdzie jeszcze nie jest załadowany cały DOM, między innymi twój przycisk, którym chcesz pobrać dane).
-
Zwróć uwagę na błędy (podwójny cudzysłów na końcu, pomieszane nawiasy itp.). Ściągnij sobie Visual Studio Code i pisz tam, to będziesz miał podkreślone wszystkie błędy (patrz pierwszy załącznik)
-
Jak chcesz uzyskać dane z JSON, to nie result.["name"], tylko zwyczajnie przy wykorzystaniu result.name (sprawdź sobie w dev toolsach Chrome'a, widać tam jak można (patrz drugi załącznik)
-
na końcu kodu przypisujesz do zmiennej table elementy tabelowe i próbuejsz do nich doddać (table.append) dane pobrane z JSONa, ale wcześniej nigdzie tabeli nie dodałeś do swojego pliku html (nie masz funkcji CreateElement). Albo dodać wcześniej sobie tabelę do htmla, albo ją stwórz najpierw w JS, a potem do niej dodawaj rzeczy :)
Ten kod pobiera dane z JSONa, tylko utwórz poprawnie teraz tabelę
$("#submit").on('click',function(){
$.ajax({
method: "GET",
url: "http://api.openweathermap.org/data/2.5/weather?q=London&appid=88fcfe1ca88c2217199672c30ffd292a",
dataType: "json",
success: function (result) {
var table = $("<table><tr><th>Weather Description</th></tr>");
table.append("<tr><td>City:</td><td>" + result.name + "</td></tr>");
},
});
});
Tu masz z tworzeniem tabeli i wstawianiem jej do html'a.
$("#submit").on('click',function(){
$.ajax({
method: "GET",
url: "https://api.openweathermap.org/data/2.5/weather?q=London&appid=88fcfe1ca88c2217199672c30ffd292a",
dataType: "json",
success: function (result) {
var table = document.createElement('table');
$(table).append($('<tr>').append('<th>').text('Weather Description'));
$(table).append($('<td>').text('City: '));
$(table).append($('<td>').text(result.name));
$('#city').append(table);
},
});
});
@Edit,
Zapomniałem dodać jeszcze jedną rzecz. Ponieważ ajax to tzw. cross-origin requests, serwisy jak np. jsfiddle muszą zezwolić Twojemu kodowi na skorzystanie z zewnętrznych zasobów (w tym przypadku danych pogodowych). Polecam poczytać
https://blog.codepen.io/2013/09/23/ajax-codepen/
Jak testowałem pobieranie danych lokalnie, to rzeczywiście wszystko działało ok. Natomiast korzystając z jsfiddle, czy chociażby codepen.io url musi być bezpieczny, czyli musisz użyć https://
Tutaj gotowy przykład: https://jsfiddle.net/vhm5hp3o/1/