Geodaten von HTML5 in MYSQL Speichern

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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-Quellcode

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


    und der PHP Teil und den Post auszugeben:


    PHP-Quellcode

    1. <?php
    3. #Variablen festlegen
    4. $lat = $_POST['lat'];
    5. $lon = $_POST['lon'];
    9. echo $lat;
    10. echo $lon;
    11. ?>
    Alles anzeigen

    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-Quellcode

    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-Quellcode

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

  • Nein, nicht ganz.

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

    PHP-Quellcode

    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-Quellcode

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


    PHP-Quellcode

    1. echo 'Lattitude: ' . $lat . ', Longitude: ' . $lon;

  • Nun glaube ich kapier nichts mehr oder Steh ganz auf dem schlauch...

    HTML-Quellcode

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


    Und der PHP teil:



    PHP-Quellcode

    1. <?php
    3. #Variablen festlegen
    4. $lat = $_POST['lat'];
    5. $lon = $_POST['lon'];
    9. echo 'Lattitude: ' . $lat . ', Longitude: ' . $lon;
    11. ?>
    Alles anzeigen

  • 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.