javascript - 使用 Ajax、jQuery 将数据发布到 Django
问题描述
我想将 html5 地理位置数据提交到 django 管理后端。但是我不确定是否在 index.html javascript 中正确设置了 javascript、jQuery 和 ajax。我能够在 html 页面中显示纬度和经度,但无法将数据发布到 django。有没有好心的人来帮助纠正我可能出错的地方。作为一个新手,我已经为此工作了一周。真的很感激任何帮助。谢谢你。
到目前为止有效的代码如下。django app的文件结构如下:
-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
索引.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 %}
脚本.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("/echo/html/", 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>
管理员.py
from django.contrib import admin
from .models import Member
# Register your models here.
admin.site.register(Member)
模型.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
#from django.views.decorators.csrf import csrf_exempt
# Create your views here.
#@csrf_exempt
def index(request):
return render(request, 'ajax/index.html')
#@csrf_exempt
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")
]
视图.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),
]
解决方案
最可能的原因是模板中没有 CSRF Token 标签。
您必须将其放入模板中,如下所示:
{% csrf_token %}
您还可以定义视图不需要放置装饰器csrf_exempt的 CSRF 令牌:
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def my_view(request):
return HttpResponse('Hello world')
希望对你有帮助!
推荐阅读
- firebase-security - 通过 Firebase 控制台访问 Firebase 数据库是否会增加使用量?
- python - 从 python 3.7.6 升级到 python 3.8 后出现 Pip 错误
- javascript - SQLAlchemy 序列化的 JSON 输出不在 HTML 表中呈现
- node.js - 谁能解释一下纱线锁是如何工作的?
- c# - 无法加载文件或程序集 'Microsoft.Extensions.DependencyInjection.Abstractions,版本 = 3.1.1.0
- pytorch - Pytorch Tensorboard add_histogram:如果数据包含单个值怎么办?如何显示该值的直方图?
- android - Android 应用程序未通过 SSL 错误处理程序获得批准
- javascript - 我可以在同一个端口上部署多个 React 应用程序吗?管理面板和前端两种反应生产模式无法正常工作相同的节点 js api 服务器
- c# - 用 TPL 数据流中的最新值替换缓冲值
- postgresql - Postgres - 只读副本的索引