javascript - 将当前位置坐标作为 GET 消息发送到服务器

Question

我需要将当前位置发送到服务器上的 php 文件。但是，我使用的方法在找到位置坐标之前打印出 php 响应的结果。显示坐标需要 2-3 秒:

<script>
var lat;
var lng;
        function clicked(){

        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(success,error);
        }

        else{
            document.getElementById("hello").innerHTML = "Not supported";
        }

        function success(position){
                lat = position.coords.latitude;
                lng = position.coords.longitude;
                document.getElementById("hello").innerHTML = "lat :"+lat+"<br>long :"+lng;
                }

        function error(err){
                document.getElementById("hello").innerHTML = "Error Code: "+error.code;
                if(err.code == 1){
                    document.getElementById("hello").innerHTML = "Access denied";
                    }
                if(err.code == 2){
                    document.getElementById("hello").innerHTML = "Position unavailable";
                }
        }

        }


        var xmlhttp;
        if (window.XMLHttpRequest){ 
                xmlhttp = new XMLHttpRequest();
            }else{ 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("list").innerHTML = xmlhttp.responseText;
                    }
            }
            xmlhttp.open("GET","queryRestaurantsList.php?lat="+lat+"&lng="+lng,true);
            xmlhttp.send(); 
    }

</script>   

php 文件$_POST 的回显出现在找到坐标之前，因此 $_POST 数组显示为空

<?

echo var_dump($_POST);

echo "HEllo WOrld!";

?>

Answer 1

有几件事..

1) 您(尝试)通过 GET 而不是 POST 发送坐标。我希望 $_POST 为空。
2) 您想要将 AJAX 调用移至 success() 回调处理程序。例如

<script>
var lat;
var lng;
    function clicked(){

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(success,error);
    }

    else{
        document.getElementById("hello").innerHTML = "Not supported";
    }

    function success(position){
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            document.getElementById("hello").innerHTML = "lat :"+lat+"<br>long :"+lng;

            var xmlhttp;
            if (window.XMLHttpRequest){ 
                xmlhttp = new XMLHttpRequest();
            }else{ 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("list").innerHTML = xmlhttp.responseText;
                    }
            }
            xmlhttp.open("GET","queryRestaurantsList.php?lat="+lat+"&lng="+lng,true);
            xmlhttp.send(); 

            }

    function error(err){
            document.getElementById("hello").innerHTML = "Error Code: "+error.code;
            if(err.code == 1){
                document.getElementById("hello").innerHTML = "Access denied";
                }
            if(err.code == 2){
                document.getElementById("hello").innerHTML = "Position unavailable";
            }
    }

    }
}

</script>   

xmlhttp.onreadystatechange 可能需要在函数范围之外，我不确定。我使用 jQuery，它会为你处理这一切。 ;).