Не удается получить данные AJAX из PHP

Question

Я пытаюсь создать простое приложение, которое находит ваше местоположение, отправляет координаты с помощью AJAX в файл PHP и затем вычисляет расстояния в PHP, чтобы показывать соседние магазины.

это мой Javascript и 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); 
    } 
}); 

, а затем в моем PHP Я использую:

<?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); 
?> 

Может кто-нибудь понять, почему это не работает? Кажется, что это отображает магазины в случайном порядке, а не используя переменные $ lat и $ lon. Исправляю ли я данные неправильно? ajax отображает данные, поэтому должен правильно отправлять переменные (я думаю)

Любая помощь была бы принята с благодарностью!

Answer 1

Отправить значения, как предложено KSDaemon и в дополнение к этому, переместите метод $.ajax до конца navigator.geolocation.getCurrentPosition метода успеха. В противном случае он может быть выполнен до того, как страница будет готова, а значения lat и lon будут заполнены.

$(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: [] 
}); 

Answer 2

Вы отправляете strings в свои data : {lat: 'lat', lon: 'lon'},, но не за значения. Вы должны изменить это

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

или

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