使用 Ajax、jQuery 将数据发布到 Django
Posted
技术标签:
【中文标题】使用 Ajax、jQuery 将数据发布到 Django【英文标题】：Posting data to Django with Ajax, jQuery 【发布时间】：2018-06-07 16:32:19 【问题描述】：我想将 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
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("/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>
admin.py
from django.contrib import admin
from .models import Member
# Register your models here.
admin.site.register(Member)
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
#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")
]
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),
]
【问题讨论】：
我没有看到$position 在任何地方定义或设置。即使您将其更改为 position，它也不会在您的 showPosition 之外定义
固定：jsfiddle.net/khrismuc/srhgnvqe
现在看看，谢谢克里斯！
嗨，克里斯，感谢您的帮助。我尽可能多地浏览它，并尝试在网络上找到其他类似的发布到 django 管理站点的示例。该代码确实设法根据终端发布，但在我创建超级用户检查结果后，django 管理页面中未显示纬度和经度。 script.js 中的 .post(/echo/html/, data, ...) 发布到哪里？是否需要在 views.py 或 urls.py 中进行更改才能将数据发布到 model.py？ views.py 和 urls.py 文件与以前保持一致。很抱歉有这么多问题。谢谢
/echo/html/ 特定于 jsfiddle；您需要使用 POST 请求的实际路由。我猜像/ajax/insert...？
【参考方案1】：
最可能的原因是模板中没有CSRF Token标签。
你必须像这样把它放在模板中：
% csrf_token %
您还可以定义视图不需要放置装饰器的 CSRF Token csrf_exempt：
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def my_view(request):
return HttpResponse('Hello world')
希望对你有帮助！
【讨论】：
谢谢。它有帮助，我按照您的建议添加了代码。但我仍然无法发布到 django 管理站点。以上是关于使用 Ajax、jQuery 将数据发布到 Django的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery $.ajax 将请求参数数组发送到 servlet？
如何使用 ajax 调用将 jquery 数据表加载到 div 中
使用 jQuery.ajax 发布函数将 javascript 数组中的数据传递到服务器？
将数据传递到处理程序的 Jquery ajax 不起作用（Asp.net、C#、Jquery）