Geodaten von HTML5 in MYSQL Speichern

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Geodaten von HTML5 in MYSQL Speichern

    Guten Abend Gemeinde,

    Ich stehe gerade vor einem Problem. Ich blutiger Anfänger in der Bereich web da ich eher was in der .net Programmierung unterwegs bin.

    Ich würde gerne eine HTML5 Geoposition in eine Datenbank speichern. Alos nicht um Webseiten Besucher rauszusuchen sondern eher zum Internen gebrauch.

    Mein HML Code:

    HTML Source Code

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <p>Button druecken um Standort zu ermitteln</p>
    5. <button onclick="getLocation()">Ermitteln</button>
    6. <p id="demo"></p>
    7. <script>
    8. function getLocation() {
    9. if (navigator.geolocation) {
    10. navigator.geolocation.getCurrentPosition(showPosition);
    11. }
    12. }
    13. function showPosition(position) {
    14. var position = {
    15. "lat" : position.coords.latitude,
    16. "lon" : position.coords.longitude
    17. };
    18. $.ajax({
    19. data: position,
    20. url: 'verarbeiten.php',
    21. type: 'post'
    22. });
    23. }
    24. </script>
    25. </body>
    26. </html>
    Display All


    und der PHP Teil und den Post auszugeben:


    PHP Source Code

    1. <?php
    2. #Variablen festlegen
    3. $lat = $_POST['lat'];
    4. $lon = $_POST['lon'];
    5. echo $lat;
    6. echo $lon;
    7. ?>
    Display All

    Im PHP teil dann die Daten zu speichern bekomme ich hin.

    Würde mir jemand ein ein Lösungsansatz sagen?

    Grüsse vom Bodensee
  • Okay. Also der Ajax-Aufruf passiert ja im Hintergrund. Und das Ergebnis wird wieder an deine "Html-Seite" geliefert, wo du sie ausgeben kannst. Dazu musst du den Ajax-Aufruf erweitern:

    JavaScript Source Code

    1. $.ajax({
    2. data: position,
    3. url: 'verarbeiten.php',
    4. type: 'post',
    5. success: function(data) {
    6. $('#demo').html(data);
    7. }
    8. });

    In diesem Falle werden alle Ausgaben dem Paragraph mit der Id "demo" als Inhalt zugewiesen.
  • Hallo Ich habe das so erweitert:

    Ist das so richtig?

    HTML Source Code

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <p>Button druecken um Standort zu ermitteln</p>
    5. <button onclick="getLocation()">Ermitteln</button>
    6. <p id="demo"></p>
    7. <script>
    8. function getLocation() {
    9. if (navigator.geolocation) {
    10. navigator.geolocation.getCurrentPosition(showPosition);
    11. }
    12. }
    13. function showPosition(position) {
    14. var position = {
    15. "lat" : position.coords.latitude,
    16. "lon" : position.coords.longitude
    17. };
    18. $.ajax({
    19. data: position,
    20. url: 'verarbeiten.php',
    21. type: 'post',
    22. success: function(data) {
    23. $('#lat').html(data);
    24. $('#lon').html(data);
    25. }
    26. });
    27. }
    28. </script>
    29. </body>
    30. </html>
    Display All
  • Nein, nicht ganz.

    data ist in diesem Fall die gesamte Ausgabe deines PHP-Skriptes. Also wegen

    PHP Source Code

    1. echo $lat;
    2. echo $lon;


    einfach die Lattitude und die Longitude aneinander gehängt.

    Und folgender Code ist jQuery. Erst werden im DOM (das ist grob gesagt der Html-Baum) alle Elemente mit der Id "demo" (funktioniert mit der CSS-Syntax) gesucht. Dort wird dann der String data als Html reingepackt

    JavaScript Source Code

    1. $('#demo').html(data);
    Du kannst dann im PHP Skript ungefähr folgende Ausgabe machen:


    PHP Source Code

    1. echo 'Lattitude: ' . $lat . ', Longitude: ' . $lon;
  • Nun glaube ich kapier nichts mehr oder Steh ganz auf dem schlauch...

    HTML Source Code

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <p>Button druecken um Standort zu ermitteln</p>
    5. <button onclick="getLocation()">Ermitteln</button>
    6. <p id="demo"></p>
    7. <script>
    8. function getLocation() {
    9. if (navigator.geolocation) {
    10. navigator.geolocation.getCurrentPosition(showPosition);
    11. }
    12. }
    13. function showPosition(position) {
    14. var position = {
    15. "lat" : position.coords.latitude,
    16. "lon" : position.coords.longitude
    17. };
    18. $.ajax({
    19. data: position,
    20. url: 'verarbeiten.php',
    21. type: 'post',
    22. success: function(data) {
    23. $('#demo').html(data);
    24. }
    25. });
    26. }
    27. </script>
    28. </body>
    29. </html>
    Display All


    Und der PHP teil:



    PHP Source Code

    1. <?php
    2. #Variablen festlegen
    3. $lat = $_POST['lat'];
    4. $lon = $_POST['lon'];
    5. echo 'Lattitude: ' . $lat . ', Longitude: ' . $lon;
    6. ?>
    Display All
  • Nun glaube ich kapier nichts mehr oder Steh ganz auf dem schlauch...
    Das hilft immer recht wenig, wo gibts Probleme, was verstehst du nicht?

    Funktioniert der Code denn nicht? Wenn Nein, welche Fehlermeldungen bekommst du?

    Aber die Funktionsweise von Ajax kapierst du? Das PHP-Skript wird mit Ajax nur im Hintergrund geladen. Und dessen Ausgabe wird als der data-Parameter an die success-Methode in diesem Fall als String zurückgegeben.
    Da der User das aber nicht sieht, muss es ja erst angezeigt werden. Deswegen fügt man es "ins Html" ein.