0

I have the following code:

<!DOCTYPE html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>

  </head>

  <body>

<script type="text/javascript">
var showPosition = function (position) {
    document.write(position.coords.latitude + ',' + position.coords.longitude);
}
navigator.geolocation.getCurrentPosition(showPosition);

</script>
</body>

This little script outputs the user's location as in latitude and longitude. Instead of outputing this on the page I want to store the longitude and latitude in two separate variables so I can get the distance between the user's location and a given destination. I did some research and I understand that this can only be done using AJAX, however I have no idea how to do it.

That's when my question comes in, how do I store these values from JS in a PHP variable?

Also, if there's any way that's faster to calculate the distance in kms between the user's location and a given destination, I am open to suggestions.

Thank you!

Brrraap
  • 23
  • 6
  • "I did some research and I understand that this can only be done using AJAX, however I have no idea how to do it." — Have you tried looking for an introductory Ajax tutorial? – Quentin Jan 24 '15 at 13:45
  • Yes, I did searched for an AJAX tutorial, I even have a book that could help me in this direction. However, I also have a really close deadline for this project and sadly no one has time for me to stop and learn new technologies. If you know any good AJAX tutorials and don't mind sharing I'd really appreciate it and try to study them as soon as I have time. :) – Brrraap Jan 24 '15 at 13:59
  • possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) – Farid Nouri Neshat Jan 24 '15 at 14:25

1 Answers1

1

Yes, you should use AJAX.

Note that JS (the way you intend to use it) runs on the client side (in the browser) and php runs on a server, which in many cases results in asynchronous communication, hence AJAX.

In your JavaScript code, you need to create a XMLHttpRequest object that can handle the communication:

var xhr = new XMLHttpRequest();

An example on how to receive the answer from the server:

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status == 200) {
            // do something with xhr.responseText
        }
    }
}

An example on how to send the data:

xhr.open("POST", "serverside.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(content);

content will be the data you send to the server, e.g. "c=HelloWorld"

In your php script at the server side, you need to handle the received data. It can look something like this:

<?php    

if (isset($_POST['c'])) {
    echo htmlspecialchars($_POST['c'], ENT_QUOTES, 'UTF-8'); 
}

?>

The server should then respond with 'HelloWorld'.

player
  • 70
  • 11
  • That PHP script is going to create an HTML document using raw input from the browser. It is vulnerable to XSS. – Quentin Jan 24 '15 at 13:47
  • @Quentin. You are completely right. I will edit the example to include encoding on the response. – player Jan 24 '15 at 13:57
  • Thank you very much for your answer! I'll try to implement it and let you know if I have any more problems. – Brrraap Jan 24 '15 at 14:01
  • In the third line of the first block of code, what is the purpose of the "&& xhr.status < 300" check? Since it's an "AND"/&&, shouldn't the second portion/check of the if statement be read only if the first one is true? If the first one is true, the second one will also always be true, unless I'm missing something. – Drown Jan 24 '15 at 14:13
  • @Drown. I agree, the logic here is off. As long as the reponse is of type 200OK, it is all good. Sorry for the confusion. – player Jan 24 '15 at 14:21