Diskuze: Ajax - Parse Json
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Honza Bittner:4.1.2018 17:45
Problém je v tom, že ten AJAX se IMO nespustí synchronně. Spustí se
nezávisle na zbytku funkce, a tedy se nejdříve vykoná část
document.getElementById("demo").innerHTML = update.lat; a až poté
callback co se ti zavolá při odpovědi ze serveru
$.ajax({....
Správně tedy musíš pracovat nějak takto (prostě zpracovat všechno v tom daném callbacku):
function update() {
$.ajax({
type: 'GET',
url: 'php/gpstracker/update_data_tracker.php',
dataType: 'json',
success: function(response) {
var update = jQuery.parseJSON(response);
document.getElementById("demo").innerHTML = update.lat;
}
});
}+5 Zkušeností
Honza Bittner:4.1.2018 19:59
Zase nemáš všechno v té success funkci. Dej to všechno
dovnitř a mělo by to být +- ok.
Může se zdát, že to funguje stejně i takto, avšak jelikož
nepoužíváš u některých proměnných var, tak se nastavují
jako globální proměnné ("If you're in a function then var will create a
local variable, "no var" will look up the scope chain until it finds the
variable or hits the global scope (at which point it will create it):" viz https://stackoverflow.com/…0494/3281252) a máš tak data
spožděná o jedno volání funkce a vůbec bych na to nespoléhal. Tj.
ideálně všude používat var a vše mít v tom té funkci
success.
Btw. na hodně věcí si vytváříš proměnnou zbytečně (používáš jí
pak jen na jednom místě), ale to až tak nevadí, pokud ti to pomůže
zpřehlednit kód. 
Jestli jsem to dobře pochopil, tak máš víceméně několik možností. Netuším, jak máš členěnou výslednou stránku, jestli jdeš cestou MVC (což hádám že ne) atd.
1.) Ten soubor, který ti poskytuje data, můžeš rozvětvit tak, že mu
předáš v proměnné info, jaký typ výsledku si přeješ.
update_data_tracker.php?data=json nebo např.
update_data_tracker.php?data=inUse a podle použití si jej zavoláš. V
jednom případě si necháš vrátit data pro gmap polyline, v druhém pouze
info, zda někde něco létá.
2.) Nechat normálně projet stránku tak, jak to máš do teď a po
zpracování ajaxu otestovat, zda existuje vrácený json (případně má
rozumné údaje) a přepsat podle toho předchozí část stránky (což má
svoje úskalí např. v tom, že může uživatel dobu čumět na chybný
obsah). To bych asi úplně nedoporučoval.
3.) Vůbec neřešit použití externího php souboru, ale už před
vykreslováním stránky si zjistit, zda (inUse == 1) přes dotaz na databázi a
podle toho vykreslovat zbytek - např. vůbec nenačítat gmapu, nespouštět
ajax apod. Toto mi připadá nejspolehlivější a pokud nemáš problém s
tím, že se ti bude v html motat kód pro php, tak bych to vyřešil takto. Na
jednoduchou stránku to není špatně a pro větší projekt to stejně budeš
řešit asi celé jinak.
Bebeno:5.1.2018 19:32
Dakujem za reakciu Hando.No ak ta dobre chapem tak odporucas mi upravit si PHP pre dva moyne situacie. OK to by som mal zvladnut.
Ale potom Pri nacitani stranky na zaciatku ho treba opat volaj cez ajax? Aby som dostal hodnotu Inuse?
Pre istotu prikladam aj kod v subore. Proste chcem odstranit tie PHP echa a nahradit ich premennymi ktore pouzivam v sekcii ajax.
musite mat so mnou trpezlivost. ucim sa za pochodu 3 jazyky naraz . HMTL,
PHP, JS tak ma to trosku pletie ale nie som zase nechapavy
Dakujem
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Arduino, GPS , tracker" />
<meta name="author" content="Ivan" />
<link rel="shortcut icon" href="obrazky/ikona.ico" />
<link rel="stylesheet" href="styl.css" type="text/css" />
<?php include_once 'php/visitors_log.php';?>
<?php include_once 'php/gpstracker/last_table_tracker.php';?>
<?php include_once 'php/gpstracker/last_data_tracker.php';?>
<style>
#map {
height: 400px;
width: 100%;
box-shadow: 2px 2px 10px #1c2228;
}
</style>
<title>GPS-tracker</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/google_map_tracker.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDynka_aNgQEG0O4V1U4Oo5WmVoDjNJ7Rc&language=sk&callback=initMap">
</script>
</head>
<body>
<header>
<div id="logo"><h1>Ivanwebserver</h1></div>
<nav>
<ul>
<li><a href="index.php">Domov</a></li>
<li><a href="usokolika.php">U sokolíka</a></li>
<li class="aktivni" ><a href="lietanie.php">Lietanie</a></li>
<li><a href="arduino.php">Arduino</a></li>
<li><a href="pic.php">PIC-Microchip</a></li>
</ul>
</nav>
</header>
<article>
<div id="centrovac">
<header>
<h1>GPS-tracker</h1>
<iframe src="http://free.timeanddate.com/clock/i61ef16y/n136/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/hwc000/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhs2/hms2/hss3"
frameborder="0" width="110" height="110"></iframe>
</header>
<section>
<h2>Online GSP tracker</h2>
<p style="font-size:160%" id="inuse"></p>
<script>
if(<?php echo $inuse ?> == 0){ // zistuje ci je posledny let stale aktivny aby vypisal text.
// Toto budem este upravovat. Aby boli dve verzie textu
document.getElementById("inuse").innerHTML = "Aktuálne neprebieha žiadny let";}
</script>
<p>Môj vlastný online GPS tracker funguje cez mobilnú GPRS sieť preto sa sen tam môže stať že nastane krátky výpadok
odosielania dát, hlavne pokiaľ letím nad horami kde ten signál je predsa len slabší.</p>
<p>Počas letu odosielam nasledovné data.</p>
<ul style="list-style-type:circle">
<li>Zemepisná šírka (Latitude)</li>
<li>Zemepisná dĺžka (Longtitude)</li>
<li>Rýchlosť udávaná v knotoch (1 knot = 1.852 km/h)</li>
<li>Nadmorská výška udávaná v stopách (1 feet = 0.3048 m) výška voči hladine mora !</li>
<li>Magnetický smer udávaný v stupňoch (heading)</li>
<li>Registračná značka lietadla</li>
</ul><br>
<table class="update" align="center">
<tr>
<th class="update">Zem.šírka</th>
<th class="update">Zem.dĺžka</th>
<th class="update">Rýchlosť</th>
<th class="update">Výška</th>
<th class="update">Smer</th>
</tr>
<tr>
<td class="update" id="lat">-</td>
<td class="update" id="lng">-</td>
<td class="update" id="speed">-</td>
<td class="update" id="feet">-</td>
<td class="update" id="heading">-</td>
</tr>
</table>
<br>
<div id="map"></div>
<script>
if(<?php echo $inuse ?> == 1) { // Kontrola ci je let stale aktivny pre
function initMap() {
var myLatLon = {lat: <?php echo $lasLan ?>, lng: <?php echo $lasLon ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: myLatLon,
mapTypeId: 'terrain'
});
var flightPlanCoordinates = JSON.parse('<?php include 'php/gpstracker/json_data.php';?>');
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
var marker = new google.maps.Marker({
position: myLatLon,
// icon: { url: "obrazky/plane.png",
// scaledSize: new google.maps.Size(30, 30)},
map: map,
title:'<?php echo $type ?>',
draggable: true,
animation: google.maps.Animation.DROP,
});
var myVar = setInterval(function(){ update() }, 5000);
function update() {
$.ajax({
type: 'GET',
url: 'php/gpstracker/update_data_tracker.php',
dataType: 'json',
success: function(response) {
var update = jQuery.parseJSON(response);
console.log(response.inuse);
var updateLat = response.lat;
var updateLng = response.lng;
var updateSpeed = response.speed;
var updateFeet = response.feet;
var updateHeading = response.heading;
var updateInuse = response.inuse;
document.getElementById("lat").innerHTML = updateLat;
document.getElementById("lng").innerHTML = updateLng;
document.getElementById("speed").innerHTML = updateSpeed + " knt";
document.getElementById("feet").innerHTML = updateFeet + " feet";
document.getElementById("heading").innerHTML = updateHeading + " °";
if (updateInuse == 1) {
var path = flightPath.getPath();
path.push(new google.maps.LatLng(response.lat,response.lng));
flightPath.setPath(path);
var latlng = new google.maps.LatLng(response.lat,response.lng);
marker.setPosition(latlng);
}
else {
marker.setPosition(null);
}
}
});
}
}
}
</script>
<p text-align="left"><cite> Poznámka: Pre priblíženie náhľadu v mape pomocou kolieska na myši držte súčasne aj pravé tlačítko myši</p><br>
<br>
<h2> História letov</h2>
<table class="table" width="700px" align="center">
<tr>
<th width="100" class="table">Dátum letu</th>
<th width="100" class="table">Registračka</th>
<th class="table">Poznámka</th>
</tr>
<?php
$conn=mysqli_connect('localhost','' ,'','gps_tracker');
$sql = "SELECT table_name FROM information_schema.TABLES WHERE table_schema = 'gps_tracker'";
$resultTables = $conn->query($sql);
while ($row = mysqli_fetch_assoc($resultTables)){
$table = $row['table_name'];
echo '<tr>';
echo '<td class="table">'.'<a href="gpstracker_history.php?tab='.$table.'">'.$row['table_name'].'</a>'.'</td>';
$sql = "SELECT `type`,`notice` FROM `$table` ORDER BY id DESC LIMIT 1";
$resultType = $conn->query($sql);
$row2 = mysqli_fetch_assoc($resultType);
echo '<td class="table">'.$row2['type'].'</td>';
echo '<td class="table">'.$row2['notice'].'</td>';
echo '</tr>';
}
mysqli_close($conn);
?>
</table>
<br>
<a href="lietanie.php"/>
<img src="obrazky/back_icone.png" alt="back_icone" align="right">
</a>
</section>
<div class="cistic"></div>
</div>
</article>
<footer>
</footer>
</body>
</html>Tak Dakujem zatial zatial za pomoc. Chyba sa mi nakoniec podarila odstranit. Problem bol v tom ze ja som si premmenu definoval dva krat a tim padom program nevedel ziskat spravne data.
Takye vsetko funguje skoro na 100% a6 na jednu malickost ktora mi fakt lezie
na nervy..
Skusim popisat co to robi a este raz prilozim finalny kod snad niekto
poradi.
Ked uzivatel nacita stranku a prave neprebieha zidny let tak sa nacita len mapa pretoze premmenna uploadInuse = 0 ktora je definovana v poslednej existujucuje tabulke v databaze. Kazdych 5 sekund si preveruje tieto data.
Strranku necham otvorenu a vytvorim novy tabulku a pridam prvy riadok s hodnotami kde uploadInuse sa uz rovna 1. Ked mi prvy krat skoci do podmienky kde nacita data pre vykreslenie polyline. Spravne by malo nacitat len ten jeden novy riadok ale stane sa to ze v premmenej flightPlanCoordinates sa nachadzaju aj data z predposlednej tabulky a ja fakt neviem preco, lenže po refresh stranke je vsetko tak ako ma byt.
Pouzil som aj console.log pre sledovanie premmennej uploadInuse aby som sa
uistil ze mi to berie data zo spravnej tabulky a robi to presne tak ako ma. Cize
ak je uploadInuse = 0 tak do sekcie pre nacitanie flightPlanCoordinates vobec
nejde. Tuto premmenu pred nacitanim aj mazem ako je vidiet z kodu.
na spodu kodu nie su vsetky zatvorky to preto lebo tam mam este jednu podmienky
ale ta je pre graf takze som ju sem nedaval, berte to tak ze to je ukoncene
spravne.Tam chyba urcite nie je.
Dake napady?
Prikladam aj foto kodu PHP pre ziskanie poslednej tabulky tabulky
Dakujem
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 48.60, lng: 19.8}, // stred Slovenska
mapTypeId: 'terrain'
});
document.getElementById("inuse").innerHTML = "Aktuálne neprebieha žiadny let";
$(document).ready(function(){
update();
});
var refresh = setInterval(function(){ update() }, 5000);
var firstLoad = false;
var tracking = false;
var flightPlanCoordinates = [];
function update() {
$.ajax({
type: 'GET',
url: 'php/gpstracker/update_data_tracker.php',
dataType: 'json',
success: function(response) {
var update = jQuery.parseJSON(response);
var updateLat = response.lat;
var updateLng = response.lng;
var updateSpeed = response.speed;
var updateFeet = response.feet;
var updateHeading = response.heading;
var updateInuse = response.inuse;
var updateType = response.type;
if(updateInuse == 0 && tracking == true){ // ukoncenie letu
marker.setPosition(null);
document.getElementById("lat").innerHTML = 0;
document.getElementById("lng").innerHTML = 0;
document.getElementById("speed").innerHTML = 0;
document.getElementById("feet").innerHTML = 0;
document.getElementById("heading").innerHTML = 0;
document.getElementById("inuse").innerHTML = "Let ukončený";
}
if(updateInuse == 0 && firstLoad == false){ // prve nacitanie stranky ak let neprebieha
document.getElementById("inuse").innerHTML = "Aktuálne neprebieha žiadny let";
flightPlanCoordinates = [];
//console.log(flightPlanCoordinates);
}
// vykreslenie polyline iba ako je let aktivny a iba pri prvom nacitani stranky ak je let aktivny
if(updateInuse == 1 && firstLoad == false && tracking == false){
var myLatLon = {lat:updateLat, lng:updateLng };
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: myLatLon,
mapTypeId: 'terrain'
});
flightPlanCoordinates = JSON.parse('<?php include 'php/gpstracker/polyline_json_data.php';?>');
console.log(flightPlanCoordinates) ;
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
marker = new google.maps.Marker({
position: myLatLon,
// icon: { url: "obrazky/plane.png",
// scaledSize: new google.maps.Size(30, 30)},
map: map,
title:updateType,
draggable: true,
animation: google.maps.Animation.DROP,
});
document.getElementById("lat").innerHTML = updateLat;
document.getElementById("lng").innerHTML = updateLng;
document.getElementById("speed").innerHTML = updateSpeed + " knt";
document.getElementById("feet").innerHTML = updateFeet + " feet";
document.getElementById("heading").innerHTML = updateHeading + " °";
document.getElementById("inuse").innerHTML = "Online let lietadla" + updateType ;
firstLoad = true;
}
if(updateInuse == 1 && firstLoad == true){
document.getElementById("lat").innerHTML = updateLat;
document.getElementById("lng").innerHTML = updateLng;
document.getElementById("speed").innerHTML = updateSpeed + " knt";
document.getElementById("feet").innerHTML = updateFeet + " feet";
document.getElementById("heading").innerHTML = updateHeading + " °";
document.getElementById("inuse").innerHTML = "Práve lietam s " + updateType ;
tracking = true;
}
if(updateInuse == 1 && firstLoad == true){
var path = flightPath.getPath();
path.push(new google.maps.LatLng(response.lat,response.lng));
flightPath.setPath(path);
var latlng = new google.maps.LatLng(response.lat,response.lng);
marker.setPosition(latlng);
map.panTo(latlng); // keep marker in center
}
Zobrazeno 17 zpráv z 17.