通过 ajax 和 jquery 向 php 发送变量答案

【问题标题】：sending variables to php via ajax and jquery通过 ajax 和 jquery 向 php 发送变量
【发布时间】：2024-01-04 20:23:01
【问题描述】：

我想通过 html5-geolocation 请求用户的地理位置并将其发送到下一页有人告诉我我必须使用 ajax/jquery，所以这是我的代码：

<form action="response.php">
        <button onclick="getLocation()">Start</button>

<script>

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function successFunction(position) {
   var lat = position.coords.latitude;
   var longi = position.coords.longitude;

    $.ajax({
  type: "POST",
  url: "response.php",
  data: { latitude: lat, longitude: longi }
  }).done(function( msg ) {
  alert( "Data Saved: " + msg );
});
}
</script>
</form>

现在我想在我的 response.php 页面上“回显”纬度和经度但我不知道该怎么做:'( 我试过这个：

$latitude = $_POST["latitude"]; 
echo $latitude;

但是页面是空白的

【问题讨论】：

首先检查var latvar longi 中是否有任何值
控制台出现什么错误？
把你的函数名successFunction改成success?
你刚刚声明了你的函数。你在某个地方叫它吗？
好吧，我把函数名改成succes，还是没有结果

标签： php jquery ajax variables geolocation

【解决方案1】：

试试这个：

index.html：

<html>
<head></head>
<body>
    <form action="response.php" method="post">
      <input type="hidden" id="latitude" name="latitude" value="" />
      <input type="hidden" id="longitude" name="longitude" value="" />
      <input type="submit" value="Start" />
    </form>
</body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    function getLocation() {

         var options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
         };

        function success(pos) {
           successFunction(pos);
        };

        function error(err) {
            console.warn('ERROR(' + err.code + '): ' + err.message);
        };

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success, error,options);
        } else { 
            //x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function successFunction(position) {
       var lat = position.coords.latitude;
       var longi = position.coords.longitude;

        $('#latitude').val(lat);
        $('#longitude').val(longi);
    }
    getLocation();
</script>
</html>

response.php：

<?php
    $latitude = $_POST["latitude"]; 
    $longitude = $_POST["longitude"]; 
    echo "Latitude:".$latitude."</br>";
    echo "longitude:".$longitude;
?>

只需创建 index.html 复制并粘贴此代码并确保 response.php 像这样。

/yourprojectdirectory/index.html
/yourprojectdirectory/response.php

【讨论】：

还有一个空白页 :/ 我现在感觉很愚蠢，对不起大家 :'(
@Juloius 你在页面中加载了 jquery 库吗？
是的，ofc，否则我想会出错
那么您现在面临什么问题？检查您的控制台。
问题：我的 response.php 只是空白

【解决方案2】：

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function successFunction(position) {
   var lat = position.coords.latitude;
   var longi = position.coords.longitude;

    $.ajax({
  type: "POST",
  url: "response.php",
  data:"data="+ '{ "latitude":"'+ lat+'", "longitude": "'+longi+'" }'
  }).done(function(msg) {
  alert( "Data Saved: " + msg );
});
}
</script>




$location =json_decode( preg_replace('/\\\"/',"\"",$_POST['data'])); 
print_r($location);
 $lat=$location->latitude;
 echo $lan=$location->longitude;

【讨论】：