Jquery ajax Post variables to php
my ajax.php script
<?php
$lat =$_POST['lat'];
$lon = $_POST['lon'];
echo $lat;
echo $lon;
?>
And my new.html page
<!DOCTYPE html>
<html><head><script src="jquery-1.12.0.min.js"></script>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<input type="text" name="metin"/><br/>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var x = document.getElementById("demo");
var y = document.getElementById("demo1");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
var lon= position.coords.longitude;
var lat= position.coords.longitude;
y.innerHTML=lon;
x.innerHTML=lat;
$.ajax({
type: 'POST',
url: 'ajax.php',
data: { lat:lat, lon:lon}
success: function(result) {
$('#sonuc').html(result);
},
error: function() {
alert('Some error found. Please try again!');
}
});
}
}
</script>
<p id="sonuc"></p>
</body>
</html>
Firstly i know there is unused codes. But İ'm gonna use this blocks. İt's not give me any response. İt's have to work successfuly. But it's not give me lat and lon varibles in my php page. İf there is another way to send variables to php page i can try.
Answer
No functional issues in code. But there is some syntax errors that blocks the ajax request.
- Avoid the extra closing brace below the function showPosition().
- Add comma after the data section in ajax request.
Corrected code is given below.
<script>
var x = document.getElementById("demo");
var y = document.getElementById("demo1");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
var lon= position.coords.longitude;
var lat= position.coords.longitude;
y.innerHTML=lon;
x.innerHTML=lat;
$.ajax({
type: 'POST',
url: 'ajax.php',
data: { lat:lat, lon:lon},
success: function(result) {
$('#sonuc').html(result);
},
error: function() {
alert('Some error found. Please try again!');
}
});
}
</script>