2014-01-23 7 views
1

위치를 찾는 간단한 응용 프로그램을 만들고 PHP에서 AJAX를 사용하여 협조를 보낸 다음 PHP에서 주변 상점을 표시하는 거리를 계산합니다.PHP에서 AJAX 데이터를 가져올 수 없습니다.

이 내 자바 스크립트와 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 변수를 사용하는 것보다는 무작위 순서로 상점을 표시하는 것 같습니다. 데이터를 잘못 가져 왔습니까? 아약스는 데이터를 표시하므로 변수를 제대로 보내야합니다. (제 생각에는)

도움이 될만한 정보가 있습니까?

+0

SQL 쿼리가 예상 한대로 행을 정렬했는지 확인 했습니까? – positivew

+0

예, 수동으로 좌표를 입력하면 올바르게 작동합니다! – Kathryn

답변

0

로 변경해야하는 값을 보내기 navigator.geolocation.getCurrentPosition 성공 방법의 말에 $.ajax 방법을 이동합니다. 그렇지 않으면 페이지가 준비되고 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: [] 
}); 
+0

잘 작동합니다! 고맙습니다! – Kathryn

+0

만족 스럽다면 정답으로 표시하는 것을 잊지 마십시오. :) – positivew

0

귀하의 data : {lat: 'lat', lon: 'lon'},에는 strings을 보내고 있지만 값은 보내지 않았습니다. KSDaemon에 의해 그 외에 제안 당신은

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

또는

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

그게 무슨 이유로 모든 일을 멈추는 것 같습니다! – Kathryn

관련 문제