如何将 HTML5 地理定位数据保存到 python Django 管理？

Question

当用户使用地理定位网站时，是否可以将javascript html5 地理定位经纬度保存到django admin。网页的目标是保存用户的经度和纬度值，以便稍后用户再次登录时可以访问数据。

几年前我在 Whosebug 上发现了一个类似的问题，但没有任何答案。 link 是：Save JavaScript GeoLocation data to Django admin page

如果有基于此代码的答案，那就太好了 link。

我读到的另一个选项是创建一个 html 表单，并将该表单设置为由 jQuery 根据 javascript html5 地理定位产生的数据自动填充。同样，这对于像我这样的初学者来说是相当复杂的。

无论是通过代码、教程、博客 post、示例还是 link 提供的任何帮助，我都将不胜感激。我不希望提供所有的编程代码（尽管我确实从示例中学到了更好的东西）但是如果有一些 material/example 我可以去实现我的编程任务，那将会有所帮助。谢谢。

我目前的进度已经到这里了，但仍然无法 post 将纬度和经度发送到 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 管理中。我搜索了很多网站来寻找答案，但仍然没有找到任何答案。再次感谢您的帮助。

Answer 1

我已经使用 jQuery 和 Ajax 将经度和纬度数据提交到您要存储这些数据的任何模型。

在你的 model.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 端点来提交 post 请求

  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 代码，那么您可以将这些坐标值分配给变量，这些变量将与 post 请求一起提交，该请求在用户时触发点击按钮，这里的id是你要从中提交数据的表单的id，e.PreventDefault是当你post数据时停止页面重新加载。最后，django 需要 csrf 令牌才能提交表单。

如何将 HTML5 地理定位数据保存到 python Django 管理？

How to save HTML5 geolocation data to python Django admin?

html

javascript

python

django

geolocation