Question

我将文件分成了geolocation.html和test.php。我使用Ajax传递变量var纬度和经度在我的php文件中使用，但两者都回来了。真的不需要div只想在我的php文件中使用经度和纬度。我是否需要在成功函数中添加一些内容，进行函数调用？我错过了什么？ geolocation.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type= "text/javascript" src= "js/jquery.js" > </script>
<script>

//javascript is on the client
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        document.write("Geolocation is not supported by this browser.");
    }
}


function showPosition(position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;

     //Pass longitude and latitude to php how?
     $.ajax({
        type: 'POST',
        url: 'test.php',
        data: {lat: latitude,lng:longitude},
        success: function(data) {
            /*Pass longitude and latitude to php*/
            $("#content").html(data);
        }
    });
}

</head>     
<body onload="getLocation()">
<div id="content"></div> 
</body>

现在test.php文件

<?php 
 // $addlat = $_GET['addlat'];
 // $addlong = $_GET['addlong'];
 if (isset($_POST['lat']) && isset($_POST['lng']) )  {
    $lat = $_POST['lat'];
    $lng = $_POST['lng'];
    echo $lat." ".$lng  ; 
}
?>

Answer 1

尝试以下代码

HTML / PHP文件

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectToPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function redirectToPosition(position) {
    //window.location='weather.php.php?lat='+position.coords.latitude+'&long='+position.coords.longitude;

    $.ajax({
    	url: 'vuetest/testajax',
    	type: 'POST',
    	data: {lat: position.coords.latitude, lng: position.coords.longitude},
    	success : function(resp) {
    		console.log(resp)
    	}
    })
    
}
</script>

</body>
</html>

服务器端

public function testajax()
    {
        print_r($_POST);
      // Here you can check and use variables
    }

Answer 2

这对我来说非常有用。

我删除了其中一个jQuery includes。
我使用了jQuery $（document）.ready（）而不是body onload 事件。

HTML文件

<html>
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    //javascript is on the client
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            document.write("Geolocation is not supported by this browser.");
        }
    }

    function showPosition(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

        //Pass longitude and latitude to php how?
        $.ajax({
            type: 'POST',
            url: 'test.php',
            data: {lat: latitude,lng:longitude},
            success: function(data) {
                /*Pass longitude and latitude to php*/
                $("#content").html(data);
            }
        });
    }

    $(document).ready(function() {
        getLocation();
    });
    </script>
</head>   
<body>
    <div id="content"></div> 
</body>
</html>

PHP文件

<?php 
if (isset($_POST['lat']) && isset($_POST['lng']) )  {
    $lat = $_POST['lat'];
    $lng = $_POST['lng'];
    echo $lat." ".$lng  ; 
}
?>

html和php文件回来了

2 个答案: