javascript binnen php
Voor een mobiele web app zit ik met het volgend probleem:
Ik haal via javascript de locatie op van mijn gebruiker en aan de hand van een ajax call vervolgens de temperatuur op zijn locatie.
Nu dien ik uit mijn database aan de hand van de temperatuur een row op te halen.
Maar hoe kan ik aan mijn temperatuur aan (javascript) in php? Of moet ik dit volledig anders aanpakken?
Met vriendelijke groeten,
Joren
Dus aangezien ik mijn ajax call in js al heb gedaan, kan ik deze in php al gebruiken? Op welke manier dan?
Misschien even voor jullie gemak mijn code posten.
app.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
$("document").ready(function() {
//checken of geolocation is toegestaan, als deze is toegestaan wordt de functie success uitgevoerd!
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
}
else $(".test").append("Locatie bepaling dient toegestaan te worden voor het gebruik van deze webapp!");
//locatie weergeven en integratie van google maps map met je positie!
function success(position) {
$(".test").append("geoloaction succesvol!");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$(".location").append("<li>" + lat + "</li><li>" + longi +"</li>");
console.log(lat);
console.log(longi);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
WeatherRequest(position);
}
//temperature
function WeatherRequest(position){
console.log("succes");
console.log("init");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$.ajax({
//api.openweathermap.org/data/2.5/weather?lat=35&lon=139
url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + longi + "&units=metric",
dataType: "jsonp",
success: function(json) {
console.log(json);
console.log("succes function WeatherRequest");
$(".location").append("<li>De temperatuur op uw momentele plaats bedraagt: " + Math.round(json.main.temp) + " graden celcius</li>");
}
});
}
//device shake
$(this).gShake(function() {
//alert("test");
var random = Math.floor(Math.random()*10);
$(".test123").text(random);
});
//camera acces
$(".browse").click(function(e) {
e.preventDefault();
$("#myFileInput").click();
})
var testvariabele = 10;
});
//checken of geolocation is toegestaan, als deze is toegestaan wordt de functie success uitgevoerd!
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
}
else $(".test").append("Locatie bepaling dient toegestaan te worden voor het gebruik van deze webapp!");
//locatie weergeven en integratie van google maps map met je positie!
function success(position) {
$(".test").append("geoloaction succesvol!");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$(".location").append("<li>" + lat + "</li><li>" + longi +"</li>");
console.log(lat);
console.log(longi);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
WeatherRequest(position);
}
//temperature
function WeatherRequest(position){
console.log("succes");
console.log("init");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$.ajax({
//api.openweathermap.org/data/2.5/weather?lat=35&lon=139
url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + longi + "&units=metric",
dataType: "jsonp",
success: function(json) {
console.log(json);
console.log("succes function WeatherRequest");
$(".location").append("<li>De temperatuur op uw momentele plaats bedraagt: " + Math.round(json.main.temp) + " graden celcius</li>");
}
});
}
//device shake
$(this).gShake(function() {
//alert("test");
var random = Math.floor(Math.random()*10);
$(".test123").text(random);
});
//camera acces
$(".browse").click(function(e) {
e.preventDefault();
$("#myFileInput").click();
})
var testvariabele = 10;
});
php in mijn index ziet er momenteel zo uit
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
echo 'test';
$connect = new mysqli('****', '****', '***', '***');
$result = $connect->query('SELECT * from tblFotos WHERE seisoon = "zomer" ORDER BY rand() LIMIT 1' );
?>
echo 'test';
$connect = new mysqli('****', '****', '***', '***');
$result = $connect->query('SELECT * from tblFotos WHERE seisoon = "zomer" ORDER BY rand() LIMIT 1' );
?>
Dan ga ik eens kijken naar die code die je postte.
Voorbeeld van wat je ongeveer wil:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
if (isset($_GET['ajax'])) {
// doe hier mee wat je moet doen ...
$lat = $_GET['location'][0];
$lng = $_GET['location'][1];
// jij haalt deze temperatuur op ...
$temp = 32.5; // strand op Hawaï
// Wat je hier print, krijgt javascript terug
echo $temp;
// probeer ook eens om 'false' te printen
//...
// en niet vergeten: exit !!! Anders wordt de hele pagina mee geprint en naar javascript gestuurd
exit;
}
?>
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#button').click(function(e) {
// jij haalt deze locatie op zoals je het nu doet. Ik zet het even hard coded
var location = [50.84556757542811, 4.356973904299139]; // = Brussel Centraal (station)
$.ajax({
url: 'index.php?ajax=1',
data: {location: location},
success: function(message) {
// message is de echo die de server stuurde
if (message == 'false') {
$('#messages').html('er is wat fout gelopen.');
}
else {
$('#messages').html('Het is bij jou ' + message +' graden');
}
}
});
})
});
</script>
</head>
<body>
<input type="button" value="KLIK" id="button">
<div id="messages"></div>
</body>
</html>
if (isset($_GET['ajax'])) {
// doe hier mee wat je moet doen ...
$lat = $_GET['location'][0];
$lng = $_GET['location'][1];
// jij haalt deze temperatuur op ...
$temp = 32.5; // strand op Hawaï
// Wat je hier print, krijgt javascript terug
echo $temp;
// probeer ook eens om 'false' te printen
//...
// en niet vergeten: exit !!! Anders wordt de hele pagina mee geprint en naar javascript gestuurd
exit;
}
?>
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#button').click(function(e) {
// jij haalt deze locatie op zoals je het nu doet. Ik zet het even hard coded
var location = [50.84556757542811, 4.356973904299139]; // = Brussel Centraal (station)
$.ajax({
url: 'index.php?ajax=1',
data: {location: location},
success: function(message) {
// message is de echo die de server stuurde
if (message == 'false') {
$('#messages').html('er is wat fout gelopen.');
}
else {
$('#messages').html('Het is bij jou ' + message +' graden');
}
}
});
})
});
</script>
</head>
<body>
<input type="button" value="KLIK" id="button">
<div id="messages"></div>
</body>
</html>
Gewijzigd op 12/12/2013 14:37:26 door Kris Peeters
Wat bedoel je met: wat je hier print, krijgt javascript terug.
Ik snap het niet volledig..
Mvg,
Joren
echo 'Hello World'; (of zie lijn 10 van mijn vorige code)
die krijg je terug in de parameter van de success functie
success: function(message) { // message is hier dus gelijk aan 'Hello World!' // (of zie lijn 31 van mijn vorige code)
...
Gewijzigd op 12/12/2013 14:43:52 door Kris Peeters