Как передать сохраненные веб-данные localStorage в 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.

Кроме того, я не уверен, почему вы устанавливаете свойство onload запроса AJAX. Вместо этого используйте свойство 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.Отправить();