使用AJAX將值從JavaScript傳遞到PHP

我不知道爲什麼我的代碼不工作，我試圖使用AJAX將座標從JavaScript發送到PHP，並且我能夠從JavaScript中將值提取到文本框，但值是沒有傳遞給PHP。任何幫助，高度讚賞。使用AJAX將值從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這個代碼，我需要的動作在同一頁上要發生的事情而不用重新加載頁面

來源

2014-08-28 lock

嘗試'數據：{ 'getlat'：$（「＃getlat」）VAL（）， 'getlon'：$（「＃getlon」）VAL（）' – BernardoLima 2014-08-28 01:09:25

PHP只會頁面上執行加載。 – BernardoLima 2014-08-28 01:10:59

沒有什麼區別，仍然像以前一樣工作 – lock 2014-08-28 01:11:09

首先，獨立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; 
} 
?>

來源

2014-08-28 01:20:07 Ghost

只需使用一個單獨的PHP頁面。這是一個壞主意。 – PHPglue 2014-08-28 01:26:32

@PHPglue是的，我知道這就是我會建議說實話，我只是這樣做，因爲我無法分開演示文稿的PHP文件。 – Ghost 2014-08-28 01:28:41

呃，'setTimeout'是一種可怕的方式。將該代碼放入回調函數中。 – Barmar 2014-08-28 01:28:59

你不能在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; 
}

來源

2014-08-28 01:28:13

的根源是的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調用。

來源

2014-08-28 01:38:23 Ford

這一個太不起作用了 – lock 2014-08-28 01:41:59

你無法獲取數據第一個請求，但你會得到第二個請求中的數據，這是一個ajax調用。 – Ford 2014-08-28 01:43:44

AJAX的唯一目的是在不重新加載頁面的情況下從服務器獲取和發送數據。

您不需要來自服務器的任何數據。你需要瀏覽器的數據 - 也就是地理位置座標，所以AJAX和php對你在這裏需要做的事情沒有任何影響。這可以用純HTML完成。另一方面，如果您想要執行某些操作，例如將座標保存到數據庫，或者在導航器不支持地理定位時使用IP地址作爲回退，那麼您可以使用服務器和AJAX的幫助會發揮作用。

只需將您的ajax功能替換爲getLocation()即可。

<!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>

來源

2014-08-28 01:53:12

仍然沒有工作:( – lock 2014-08-28 01:54:53

如果你按F12你看到什麼錯誤？ – 2014-08-28 02:08:46

使用AJAX將值從JavaScript傳遞到PHP

回答

相關問題