Как сохранить данные геолокации HTML5 в администраторе python Django?

avatar
moonfairy
31 мая 2018 в 14:24
1983
1
1

Можно ли сохранить широту и долготу геолокации javascript html5 для администратора django, когда пользователь использует веб-сайт геолокации. Целью веб-страницы является сохранение значений долготы и широты пользователя, чтобы к данным можно было получить доступ позже, когда пользователь снова войдет в систему.

Я нашел похожий вопрос, который задавали в coderhelper много лет назад, но на него не было ответа. Ссылка: Сохранить данные JavaScript GeoLocation на странице администратора Django

Было бы здорово, если бы этот ответ был основан на этой кодовой ссылке.

Другой вариант, о котором я читал, заключается в создании html-формы и настройке формы для автоматического заполнения с помощью jQuery на основе данных, полученных с помощью геолокации javascript html5. Опять же, это довольно сложно для новичка вроде меня.

Я был бы признателен за любую помощь, будь то код, руководство, сообщение в блоге, примеры или ссылки. Я не ожидаю, что весь программный код будет предоставлен (хотя я лучше учусь на примерах), но было бы полезно, если бы был какой-то материал/пример, к которому я мог бы обратиться, чтобы реализовать свои задачи по программированию. Спасибо.

В настоящее время я достиг своего прогресса, но все еще не могу опубликовать широту и долготу на странице администратора django:

код выглядит следующим образом:

Структура проекта django выглядит следующим образом:

-ajax
   - __pycache__
   - migrations
        - __pycache__
          0001_initial.py
          __init__.py
   - static
        - css
            - bootstrap.css
        - fonts
        - js
            - script.js
   - templates
        - ajax
            - base.html
            - index.html
        - __init__.py
        - admin.py
        - apps.py
        - models.py
        - tests.py
        - urls.py
        - views.py

-server
   - __pycache__
   - __init__.py
   - settings.py
   - urls.py
   - views.py
   - wsgi.py

-db.sqlite3
-manage.py

index.html

{% extends 'ajax/base.html' %}
{% block body %}
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Get Your Location</button>
<p id="demo"></p>
<button type="button" id="btn_submit" class="btn btn-primary form-control" disabled>Submit</button>
{% endblock %}

script.js

var pos;

var $demo;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    $demo.text("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  pos = position;
  var { latitude, longitude } = pos.coords;
  $demo.html(`Latitude: ${latitude}<br>Longitude: ${longitude}`);
  $('#btn_submit').attr("disabled", null);
}

$(document).ready(function() {
  $demo = $("#demo");
  $('#btn_submit').on('click', function() {
    var data = pos.coords;
    data.csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val();
    $.post("/ajax/", data, function() {
      alert("Saved Data!");
    });
  });
});

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'ajax/css/bootstrap.css' %}"/>
</head>
<body>
    {% csrf_token %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
        </div>
    </nav>
    <div class="col-md-3"></div>
    <div class="col-md-6 well">
        <h3 class="text-primary">Python - Django Simple Submit Form With Ajax</h3>
        <hr style="border-top:1px dotted #000;"/>
        {% block body %}
        {% endblock %}
    </div>
</body>
<script src = "{% static 'ajax/js/jquery-3.2.1.js' %}"></script>
<script src = "{% static 'ajax/js/script.js' %}"></script>
</html>

models.py

from django.db import models

# Create your models here.

class Member(models.Model):
    latitude = models.DecimalField(max_digits=19, decimal_places=16)
    longitude = models.DecimalField(max_digits=19, decimal_places=16)

views.py (ajax)

from django.shortcuts import render, redirect
from .models import Member

def index(request):
    return render(request, 'ajax/index.html')

def insert(request):
    member = Member(latitude=request.POST['latitude'], longitude=request.POST['longitude'])
    member.save()
    return redirect('/')

urls.py (ajax)

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name="index"),
    url(r'^insert$', views.insert, name="insert")
]

views.py (сервер)

from django.shortcuts import redirect

def index_redirect(request):
    return redirect('/ajax/')

urls.py (сервер)

from django.conf.urls import url, include
from django.contrib import admin
from . import views

urlpatterns = [
    url(r'^$', views.index_redirect, name="index_redirect"),
    url(r'^ajax/', include("ajax.urls")),
    url(r'^admin/', admin.site.urls),
]

Это "POST" данные, но они не отображаются в админке django. Я просмотрел множество веб-сайтов в поисках ответов, почему, но до сих пор не нашел ни одного. Еще раз спасибо за помощь.

Источник

Ответы (1)

avatar
M.ike
31 мая 2018 в 19:53
3

Я использовал jQuery и Ajax для отправки данных долготы и широты в любую модель, в которой вы хотите хранить эти данные.

в вашей модели.py:

    from django.contrib.auth import User
    class UserGeoLocation(models.Model):

         user = models.OneToOneField(User)
         latitude = models.FloatField(blank=False, null=False)
         longitude = models.FloatField(blank=False, null=False)

для вашего view.py

    def save_user_geolocation(request):

         if request.method == 'POST':
             latitude = request.POST['lat']
             longitude = request.POST['long']
             UserGeoLocation.create(
                  user = request.user
                  latitude= latitude,
                  longitude = longitude,


              )

            return HttpResponse('')

теперь, когда у нас есть представление, мы можем настроить конечную точку URL для отправки запроса на публикацию

  url('^abc/xyz/$', appname.views.save_user_geolocation)

и, наконец, для фактической формы

  $(document).on('submit', '#id', function(e){
      e.preventDefault();
      $.ajax(

       type='POST',
       url = 'abc/xyz',
       data : {

           lat:position.coords.latitude,
           long: position.coords.longitude
           csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
         },
        });

для последнего шага, скажем, вы использовали код js из примера, который вы связали, затем вы можете присвоить эти значения координат переменным, которые будут отправлены с почтовым запросом, который запускается, когда пользователь нажимает кнопку, id — это идентификатор формы, из которой вы хотите отправить данные, а e.PreventDefault — остановить перезагрузку страницы при публикации данных. Наконец, токен csrf требуется django для отправки формы.

moonfairy
1 июня 2018 в 14:06
0

Спасибо за все ваши усилия, чтобы помочь мне. Меня немного смущает, что вы приложили больше усилий для ответа, чем я для моего вопроса. Я верю, что этот ответ должен решить проблему, хотя я не полностью понял весь код на 100%. Сейчас изучу и постараюсь реализовать. Большое спасибо!

moonfairy
7 июня 2018 в 13:14
0

Привет M.ike, извините, мне до сих пор не удалось решить проблему самостоятельно. Я пытался в течение недели, читая о javascript и ajax, но до сих пор не знаю, как это реализовать самостоятельно, связывая концы с концами. Спрашивать здесь - мое последнее средство, надеюсь, вы могли бы помочь. Спасибо

M.ike
7 июня 2018 в 18:07
0

Конечно, в чем проблема?

moonfairy
9 июня 2018 в 06:55
0

Извините за поздний ответ, пытался исследовать больше. Мне удалось объединить jQuery и html вместе и показать сообщение о том, что данные были сохранены без ошибок на консоли и терминале командной строки. Но мне еще не удалось отправить данные на страницу администратора django. Я отредактировал вопрос выше и добавил свой код. Спасибо, Майк.

M.ike
10 июня 2018 в 17:08
0

Круто, так что для этого последнего шага, как только вы отправите ajax-вызов POST на соответствующий URL-адрес, вам нужно сохранить данные, поступающие из формы, вы делаете это в представлении, которое вызывается для этого URL-адреса. вам просто нужно сделать то же самое, что и я в views.py, получить нужное поле из запроса POST и сохранить его в нужном поле в модели.

Kaleab Woldemariam
29 августа 2020 в 11:36
0

Что-то не так в синтаксисе? Я получаю синтаксическую ошибку.