如何將保存的localStorage Web數據傳遞給php腳本？

Question

好的，所以我在試圖找出如何將我保存在localStorage中的一些數據傳遞給我編寫的php腳本時遇到了一些問題，所以我可以將它們發送到服務器上的數據庫。我之前找到了一些代碼（https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest），看起來好像可以工作，但我沒有運氣。

這裏就是我保存數據的代碼，不是試圖通過它在我的phpscript

function getLocation() { 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(initialize, showError, takeSnap); 
     } 
     else { 
      alert("Geolocation is not supported by this browser."); 
     } 
    } 

function initialize(position) { 
     var lat = position.coords.latitude, 
      lon = position.coords.longitude; 

     var mapOptions = { 
      center: new google.maps.LatLng(lat, lon), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: true 
     } 

     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat, lon), 
      map: map, 
      title: "Current Location" 
     }); 
    } 

function showError(error) { 
     switch (error.code) { 
      case error.PERMISSION_DENIED: 
       alert("User denied the request for Geolocation."); 
       break; 
      case error.POSITION_UNAVAILABLE: 
       alert("Location information is unavailable."); 
       break; 
      case error.TIMEOUT: 
       alert("The request to get user location timed out."); 
       break; 
      case error.UNKNOWN_ERROR: 
       alert("An unkown error occurred."); 
       break; 
     } 
    } 

function storeLocal(position) { 
     if (typeof (Storage) !== "undefined") { 
      var lat = position.coords.latitude, 
       lon = position.coords.longitude; 

      localStorage.latitude = lat; 
      localStorage.longitude = lon; 
     } 
     else { 
      alert("Your Browser doesn't support web storage"); 
     } 

     return 
    } 

    function snapShot() { 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(storeLocal, showError); 
     } 
     else { 
      alert("Geolocation is not supported by this browser."); 
     } 

     var oReq = new XMLHttpRequest(); 
     oReq.onload = reqListener; 
     oReq.open("post", "snap.php?lat=" + localStorage.latitude + "&lon=" + localStorage.longitude, true); 
     oReq.send();    
    } 

    function reqListener() { 
     console.log(this.reponseText); 
    } 

這是他們的腳本我寫的值保存到數據庫

<?php 
    // Connecting to the database 
    mysql_connect("localhost", "username", "password"); 
    mysql_select_db("db_name"); 

    $latitude = mysql_real_escape_string($_GET["lat"]); 
    $longitude = mysql_real_escape_string($_GET["lon"]); 

    // Submit query to insert new data 
    $sql = "INSERT INTO locationsTbl(locID, lat, lon) VALUES('NULL', '". $latitude ."', '". $longitude . "')"; 
    $result = mysql_query($sql); 

    // Inform user 
    echo "<script>alert('Location saved.');</script>"; 

    // Close connection 
    mysql_close(); 
    ?> 

Answer 1

如何：

oReq.open("get", "snap.php?lat=" + localStorage.latitude + "&lon=?" + localStorage.longitude, true); 

（你也有localStorage.lon而不是.longitude）

由於值（字符串）在變量中，因此需要將它們連接起來，而不是將它們放入字符串中。另外，由於您似乎將這些內容傳遞給您的PHP以保存到數據庫，因此從語義上講，您應該使用POST請求......這與使用AJAX請求處理方式不同。

在你的PHP，你需要使用：

$latitude = $_GET["lat"]; 
$longitude = $_GET["lon"]; 

實際得到的是用GET請求發送的值。儘管這些值應該被轉義以避免SQL注入。

另外，我不確定你爲什麼要設置AJAX請求的onload屬性。相反，使用onreadystatechange財產......是這樣的：

oReq.onreadystatechange = function() { 
    if (oReq.readyState === 4) { 
     if (oReq.status > 199 && oReq.status < 400) { 
      console.log("successful response"); 
     } else { 
      console.log("failed response: " + oReq.status); 
     } 
    } 
}; 

的.readyState屬性是指它的狀態，其中4意味着它的完成（響應已經回來了）。 .status屬性是指HTTP狀態碼。通常在200之間& 400是好的。我知道我見過只有檢查200（不是範圍）。

UPDATE：

爲了通過在POST請求的參數，你不把它們添加到URL - 你通過他們在.send()方法。這裏是你的代碼的例子：

oReq.open("POST", "snap.php", true); 
oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
oReq.send("lat=" + encodeURIComponent(localStorage.latitude) + "&lon=" + encodeURIComponent(localStorage.longitude)); 

而且在PHP中檢索它們，你會使用：

$latitude = $_POST["lat"]; 
$longitude = $_POST["lon"]; 

Answer 2

你的代碼錯誤

應該 oReq.onload = reqListener ; oReq.open（「get」，「snap.php？lat =」+ localStorage.latitude +「& lon =」+ localStorage。lon，true）; oReq。發送（）;