如何将保存的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。发送（）;