首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将HTML5地理位置数据保存到python Django admin?

如何将HTML5地理位置数据保存到python Django admin?
EN

Stack Overflow用户
提问于 2018-05-31 22:24:54
回答 1查看 1.9K关注 0票数 1

当用户使用地理位置网站时,是否可以将javascript html5地理位置的纬度和经度保存到django管理员。web页面的目标是保存用户的经度值和纬度值,以便以后用户再次登录时可以访问这些数据。

几年前,我在stackoverflow中发现了一个类似的问题,但一直没有任何答案。链接是:Save JavaScript GeoLocation data to Django admin page

如果有一个基于这个代码链接的答案,那就太好了。

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

我将感谢任何一点的帮助,无论是通过代码,教程,博客帖子,例子或链接。我不希望提供所有的编程代码(尽管我确实从示例中学到了更多),但如果有一些材料/示例可以帮助我实现我的编程任务,这将是有帮助的。谢谢。

我目前在这里完成了我的进度,但仍然无法将纬度和经度发布到django管理页面:

代码如下:

django项目的结构如下:

代码语言:javascript
复制
-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

代码语言:javascript
复制
{% 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

代码语言:javascript
复制
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

代码语言:javascript
复制
<!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

代码语言:javascript
复制
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)

代码语言:javascript
复制
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)

代码语言:javascript
复制
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 (服务器)

代码语言:javascript
复制
from django.shortcuts import redirect

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

urls.py (服务器)

代码语言:javascript
复制
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管理中。我浏览了许多网站,寻找原因,但仍然没有找到任何答案。再次感谢您的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-01 03:53:01

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

在您的model.py中:

代码语言:javascript
复制
    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

代码语言:javascript
复制
    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请求。

代码语言:javascript
复制
  url('^abc/xyz/$', appname.views.save_user_geolocation)

最后,对于实际的形式,

代码语言:javascript
复制
  $(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令牌才能提交表单。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50626626

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档