无法从PHP检索AJAX数据

Question

I'm trying to create a simple application that finds your location, sends the co-ordintes using AJAX to a PHP file and then calculates distances in the PHP to show nearby shops.

this is my Javascript and ajax:

$(document).ready(function($) {

// Check for GEOLOCATION support 
if (navigator.geolocation) {
window.onload = function() {
var startPos;
var lat;
var lon;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('currentLat').innerHTML = startPos.coords.latitude;
document.getElementById('currentLon').innerHTML = startPos.coords.longitude;
drawMap(startPos);
}, 

function(error) {
document.getElementById('locationSupport').innerHTML = "Error code: " + error.code;
                            //   0 unknown error
                            //   1 permission denied
                            //   2 position unavailable (error response from locaton provider)
                            //   3 timed out
                        });
                    };
                }
                else {
                    document.getElementById("locationSupport").innerHTML = 'Geolocation is not supported.';
                }
            }); 

function drawMap(position) {
    var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var mapOptions = {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
    var userMarker = new google.maps.Marker({position: myLatLng, map: map});
    }       

     var jQT = new $.jQTouch({
                statusBar: 'black-translucent',
                useFastTouch: false, //required for Android
                preloadImages: []
            });

$.ajax({
   type     : "POST",
   url: "http://cs11ke.icsnewmedia.net/DVPrototype/external-data/location.php",
   data : {lat: 'lat', lon: 'lon'},
   dataType : "text",
   success: function(data){
     $("#shopsnotification").html(data);
   }
});   

and then in my PHP I am using:

<?php 
    $str_shopresult = '';
    mysqli_select_db($db_server, $db_database);
    $lat = $_POST['lat'];
    $lon = $_POST['lon'];
    $query = "SELECT name, address, 
    (6378.10 * ACOS(COS(RADIANS(latpoint)) * COS(RADIANS(lat)) * COS(RADIANS(longpoint) - RADIANS(lng)) + SIN(RADIANS(latpoint)) * SIN(RADIANS(lat)))) 
    AS distance FROM shops JOIN (SELECT '$lat' AS latpoint, '$lon' AS longpoint) AS p ORDER BY distance LIMIT 10"; 
    $result = mysqli_query($db_server, $query); 
        if (!$result) die("Database access failed: " . mysqli_error($db_server)); 
        while($row = mysqli_fetch_array($result)){ 
    $str_shopresult .= "<strong>" . $row['name']  . "</strong><br>" .
    $row['address'] . "<br><br>"; 
 } 

mysqli_free_result($result); 
echo $str_shopresult; 
mysqli_close($db_server); 
?> 

Can anyone see why this isn't working? It just seems to be displaying the shops in a random order rather than using the $lat and $lon variables. Am I retrieving the data wrong? the ajax is displaying the data therefore should be sending the variables correctly (I think)

Any help would be greatly appreciated!

Answer 1

You are sending strings in your data : {lat: 'lat', lon: 'lon'}, but not the values. You should change this to

data : {lat: lat, lon: lon},

or

data : {"lat": lat, "lon": lon}

Answer 2

Send the values as suggested by KSDaemon and in addition to that, move your $.ajax method to the end of navigator.geolocation.getCurrentPosition success method. Otherwise it might get executed before the page is ready and the lat and lon values have been populated.

$(document).ready(function ($) {

  // Check for GEOLOCATION support 
  if (navigator.geolocation) {
    window.onload = function () {
      var startPos;
      var lat;
      var lon;
      navigator.geolocation.getCurrentPosition(function (position) {
          startPos = position;
          lat = startPos.coords.latitude;
          lon = startPos.coords.longitude;
          document.getElementById('currentLat').innerHTML = startPos.coords.latitude;
          document.getElementById('currentLon').innerHTML = startPos.coords.longitude;
          drawMap(startPos);

          $.ajax({
            type: "POST",
            url: "http://cs11ke.icsnewmedia.net/DVPrototype/external-data/location.php",
            data: {
              lat: lat,
              lon: lon
            },
            dataType: "text",
            success: function (data) {
              $("#shopsnotification").html(data);
            }
          });
        },

        function (error) {
          document.getElementById('locationSupport').innerHTML = "Error code: " + error.code;
          //   0 unknown error
          //   1 permission denied
          //   2 position unavailable (error response from locaton provider)
          //   3 timed out
        });
    };
  } else {
    document.getElementById("locationSupport").innerHTML = 'Geolocation is not supported.';
  }
});

function drawMap(position) {
  var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  var mapOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
  var userMarker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });
}

var jQT = new $.jQTouch({
  statusBar: 'black-translucent',
  useFastTouch: false, //required for Android
  preloadImages: []
});