Question

我不知道为什么我的代码不起作用，我正在尝试使用AJAX将坐标从JavaScript发送到PHP，并且我能够将值从JavaScript拉到文本框但是值不会传递给PHP。任何帮助都非常感谢。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
}
$( document ).ready(function() {
$.ajax({url:"samepage3.php",type:"POST",async:false,
   data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}
});
});
</script>
</head>
<body onload="getLocation()">
<input type="text" id="getlat" name="getlat" /> 
<input type="text" id="getlon" name="getlon" />
<?php
if(isset($_POST["getlat"]))
{
    $lat = $_POST["getlat"];
    echo $lat;
}
if(isset($_POST["getlon"]))
{
    $lon = $_POST["getlon"];
    echo $lon;
}
?>
</body>
</html>

更新1：

我在samepage3.php文件中运行此代码，我需要在不重新加载页面的情况下在同一页面上执行操作

Answer 1

您无法在完全加载页面之后的samepage3.php，上执行PHP脚本。我建议将页面分开，并使用AJAX创建响应。这样的事情。

文件index.php

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position) { document.getElementById("getlat").value = position.coords.latitude; document.getElementById("getlon").value = position.coords.longitude; } function fireAjax(){ $.ajax({url:"response.php",type:"POST",async:false, data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}, success: function (response){ $('#response').html(response); } }); } </script> </head> <body onload="getLocation()"> <input type="text" id="getlat" name="getlat" /> <input type="text" id="getlon" name="getlon" /> <button onclick="fireAjax()" >Send</button> <div id="response"> </div> </body> </html>

文件response.php

<?php if (isset($_POST["getlat"])) { $lat = $_POST["getlat"]; echo 'Latitude: ', $lat, '<br/>'; } if (isset($_POST["getlon"])) { $lon = $_POST["getlon"]; echo 'Longitude : ', $lon; }

Answer 2

首先，分开PHP处理。现在使用回调获取位置后，执行AJAX。示例代码：

samepage3.php

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}

function showPosition(position) {

    $("#getlat").val(position.coords.latitude);
    $("#getlon").val(position.coords.longitude);
    $.ajax({
        url: 'request.php',
        type: 'POST',
        dataType: 'JSON',
        data:{
            getlat: $("#getlat").val(),
            getlon: $("#getlon").val()
        },
        success: function(response) {
            console.log(response);
        }
    });
}

$(document).ready(function() {
    getLocation();
});
</script>
<body>
<input type="text" id="getlat" name="getlat" />
<input type="text" id="getlon" name="getlon" />

request.php

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $lat = $_POST["getlat"];
    $lon = $_POST["getlon"];
    echo json_encode(array('lat' => $lat, 'lon' => $lon));
    exit;
}
?>

Answer 3

根本原因是getLocation函数将是一个很大的延迟，所以你需要在getLocation完成后触发ajax调用。请参阅打击修订版：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
    $.ajax({url:"samepage3.php",type:"POST",async:false,
           data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}
        });
}
$( document ).ready(function() {

});
</script>
</head>
<body onload="getLocation()">
<input type="text" id="getlat" name="getlat" /> 
<input type="text" id="getlon" name="getlon" />
<?php
if(isset($_POST["getlat"]))
{
    $lat = $_POST["getlat"];
    echo $lat;
}
if(isset($_POST["getlon"]))
{
    $lon = $_POST["getlon"];
    echo $lon;
}
?>
</body>
</html>

唯一的变化是在函数showPosition中执行ajax调用。

Answer 4

AJAX的唯一目的是从服务器获取和发送数据，而无需重新加载页面。

您不需要来自服务器的任何数据。您需要来自BROWSER的数据 - 即 - 地理位置坐标，因此AJAX和php与您在此处需要做的事情无关。这可以用纯HTML完成。

另一方面，如果你想做一些事情，比如将坐标保存到数据库，或者当导航器不支持地理定位时使用IP地址作为后备，那么当你可以使用帮助时服务器和AJAX将发挥作用。

只需用getLocation()替换你的ajax函数。

<!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
      <script>
        function getLocation() {
          if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(showPosition);
           }else{
             console.warn("Can't geolocate!");
             //this would be a good place to fall back on geolocation by IP (AJAX necessary)
           }
        }

        function showPosition(position) {
          console.info('Latitude: ' + position.coords.latitude);
          document.getElementById("getlat").value = position.coords.latitude;
          console.info('Longitude: ' + position.coords.longitude);
          document.getElementById("getlon").value = position.coords.longitude;
        }
        $( document ).ready(function() {
            getLocation();
        });
      </script>
   </head>
   <body>
     <input type="text" id="getlat" name="getlat" /> 
     <input type="text" id="getlon" name="getlon" />
   </body>
</html>

使用AJAX将值从JavaScript传递到PHP

4 个答案: