자바 스크립트에서 데이터베이스에 삽입

Question

배경에 별도로 양식에 구현해야하는 GPS 스크립트가 있습니다.

그러나 양식으로 구현하기 전에 데이터베이스의 "long"및 "lat"라는 두 필드에 위도와 경도를 각각 삽입하는 방법을 알아야합니다.

둘 다 div로 나눌 수 있었지만 여전히 데이터베이스에 저장하지 못했습니다.

그는 전체 GPS 페이지 코드 :

<script> 
    function geoFindMe() { 
    var output = document.getElementById("show"); 

    if (!navigator.geolocation){ 
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; 
    return; 
    } 

    function success(position) { 
    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; 
    var img = new Image(); 
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=20&size=300x300&sensor=false"; 

    output.appendChild(img); 
    }; 

    function error() { 
    output.innerHTML = "Unable to retrieve your location"; 
    }; 

    output.innerHTML = "<p>Locating...</p>"; 
    fillLatitudeLongitudeElements(); 
    navigator.geolocation.getCurrentPosition(success, error); 
} 

function fillLatitudeLongitudeElements(){ 
    document.getElementById("latitude").value = latitude; 
    document.getElementById("longitude").value = longitude; 
} 

function prompt(window, pref, message, callback) { 
    let branch = Components.classes["@mozilla.org/preferences-service;1"] 
    .getService(Components.interfaces.nsIPrefBranch); 

    if (branch.getPrefType(pref) === branch.PREF_STRING) { 
     switch (branch.getCharPref(pref)) { 
      case "always": 
      return callback(true); 
      case "never": 
      return callback(false); 
     } 
    } 

    let done = false; 

    function remember(value, result) { 
     return function() { 
      done = true; 
      branch.setCharPref(pref, value); 
      callback(result); 
     } 
    } 

    let self = window.PopupNotifications.show(
    window.gBrowser.selectedBrowser, 
    "geolocation", 
    message, 
    "geo-notification-icon", 
    { 
     label: "Share Location", 
     accessKey: "S", 
     callback: function(notification) { 
      done = true; 
      callback(true); 
     } 
    }, [ 
    { 
     label: "Always Share", 
     accessKey: "A", 
     callback: remember("always", true) 
    }, 
    { 
     label: "Never Share", 
     accessKey: "N", 
     callback: remember("never", false) 
    } 
    ], { 
     eventCallback: function(event) { 
      if (event === "dismissed") { 
       if (!done) callback(false); 
       done = true; 
       window.PopupNotifications.remove(self); 
      } 
     }, 
     persistWhileVisible: true 
    }); 
} 

prompt(window, 
"extensions.foo-addon.allowGeolocation", 
"Foo Add-on wants to know your location.", 
function callback(allowed) { alert(allowed); }); 
</script> 

<?php include "../dbconnect.php"; 

    if(isset($_POST['sub'])){ 

$l = $_POST['long']; 

$la = $_POST['lat']; 

$n = $_POST['name']; 

    mysql_query("INSERT INTO `gps`(`lat`, `long`, `name`) VALUES ('".$la."','".$l."','".$n."')"); 

    echo "Done though"; 

} 
    ?> 

<p><button onclick="geoFindMe()">Locate</button></p> 
<div id="show"></div> 


<form action="#" method="post"> 
<fieldset> 
Latitude 6:<br> 
<input id="latitude" type="text" name="lat" readonly><br> 
Longitude:<br> 
<input id="longitude" type="text" name="long" readonly><br><br> 
<input onclick="geoFindMe()" type="submit" value="Submit"> 
</fieldset> 
</form> 

가 추가 editied 했

<script> 
     var latitude = 0; 
     var longitude = 0; 

function geoFindMe() { 
    var output = document.getElementById("show"); 

    if (!navigator.geolocation){ 
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; 
    return; 
    } 

    function success(position) { 
    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; 
    var img = new Image(); 
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=20&size=300x300&sensor=false"; 

    output.appendChild(img); 
    }; 

    function error() { 
    output.innerHTML = "Unable to retrieve your location"; 
    }; 

    output.innerHTML = "<p>Locating...</p>"; 
    fillLatitudeLongitudeDivs(); 
    navigator.geolocation.getCurrentPosition(success, error); 
} 

function fillLatitudeLongitudeDivs(){ 
    document.getElementById("latitude").innerHTML = latitude; 
    document.getElementById("longitude").innerHTML = longitude; 
} 

function prompt(window, pref, message, callback) { 
    let branch = Components.classes["@mozilla.org/preferences-service;1"] 
    .getService(Components.interfaces.nsIPrefBranch); 

    if (branch.getPrefType(pref) === branch.PREF_STRING) { 
     switch (branch.getCharPref(pref)) { 
      case "always": 
      return callback(true); 
      case "never": 
      return callback(false); 
     } 
    } 

    let done = false; 

    function remember(value, result) { 
     return function() { 
      done = true; 
      branch.setCharPref(pref, value); 
      callback(result); 
     } 
    } 

    let self = window.PopupNotifications.show(
    window.gBrowser.selectedBrowser, 
    "geolocation", 
    message, 
    "geo-notification-icon", 
    { 
     label: "Share Location", 
     accessKey: "S", 
     callback: function(notification) { 
      done = true; 
      callback(true); 
     } 
    }, [ 
    { 
     label: "Always Share", 
     accessKey: "A", 
     callback: remember("always", true) 
    }, 
    { 
     label: "Never Share", 
     accessKey: "N", 
     callback: remember("never", false) 
    } 
    ], { 
     eventCallback: function(event) { 
      if (event === "dismissed") { 
       if (!done) callback(false); 
       done = true; 
       window.PopupNotifications.remove(self); 
      } 
     }, 
     persistWhileVisible: true 
    }); 
} 

prompt(window, 
"extensions.foo-addon.allowGeolocation", 
"Foo Add-on wants to know your location.", 
function callback(allowed) { alert(allowed); }); 
</script> 

<p><button onclick="geoFindMe()">Locate</button></p> 
<div id="show"></div> 

<?php if(isset($_POST['sub'])){ $lat = $_post['lat']; $lat = $_post['long']; echo $lat; } ?> 

<form method="post" action="#"> 
<input id="latitude" name="lat"> 
    <input id="latitude" name="long"> 
    <input type="submit" name="sub" value="sub"> 
    </form> 

--- 업데이트] --- --- UPDATED--

감사합니다 사전에 :

Answer 1

이것을 확인하십시오 : send javaScript variable to php variable

2 개의 매개 변수를 사용하는 새로운 PHP 파일을 만든 다음 해당 데이터를 데이터베이스에 삽입 한 다음 해당 페이지를 호출 할 수 있습니다.

그래서 여기에 PHP 파일이 있어야한다 방법은 다음과 같습니다

$lat = $_GET['lat']; 
$lon = $_GET['lon']; 

$insert = "insert into `table_name` (lat, lon) values ('$lat', '$lon')"; 
//some sql to run the query 
if(inserted()) 
    echo 'done'; 
else 
    echo 'failed'; 
//just for testing 
function inserted(){ 
    return true; 
} 

그런 다음 그는 자신의 위치를 ​​설정하면 클라이언트의 브라우저에서 사용하여이 파일을 호출해야합니다. 이것은 당신을 도와줍니다

<script type="text/javascript"> 
    //make a get call to add.php 
    function addToDB(lat, lon) { 
     $.get('path_php_file/file.php?lat=' + lat + '&lon=' + lon, function(data) { 
      //data refers to the response 
      //check if the response == done 
      if(data == 'done') 
       alert('done!'); 
      else 
       alert('failed!'); 
     }); 
    } 
    //call the function when user sets his location 
    addToDB(1, 2); 
</script> 

희망 : 여기가 jQuery를 사용하는 예입니다!