[英]Communicating from html or javascript to python Django
我已經閱讀了所有帖子,找不到適合我程序的任何內容。 我正在使用mapbox js框架,並希望將用戶位置“位置”發送到我的python視圖代碼中,以將其存儲在數據庫中。 當我在js代碼中執行console.log()時,它不會打印任何內容。 當我在python中進行打印時,它會打印“無”。 我像其他帖子一樣嘗試過ajax,但似乎沒有任何效果。 也許我打算以錯誤的方式將數據從模板傳遞到python代碼...請幫助
base.html文件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
</head>
</html>
home.html的
{% extends "geotracker/base.html" %}
{% load static %}
{% block content %}
<body>
<div id='map' width='100%' style='height:400px'></div>
<form id="myform" name="myform">
{% csrf_token %}
<input type="hidden" id="location" name="location"/>
</form>
<script>
mapboxgl.accessToken = 'mytoken';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8], // starting position
zoom: 3 // starting zoom
});
// Add geolocate control to the map.
var geolocate = new mapboxgl.GeolocateControl();
map.addControl(geolocate);
geolocate.on('geolocate', function(e) {
console.log('locating...');
var lon = e.coords.longitude;
var lat = e.coords.latitude
var position = [lon, lat];
var element = document.getElementById('location');
element.innerHTML = position;
$('#myform').submit(function (ev) {
//ev.preventDefault();
console.log('hello');
});
});
</script>
</body>
{% endblock %}
views.py
def home(request):
context = {
"mclient": mclient
}
print("POST in view:\t%s" % request.POST.get('location'))
# get users location if authenticated
if request.user.is_authenticated:
Fan.objects(user=str(request.user)).modify(set__currentPosition=
[0,0], image='http://localhost:8000/media/%s' %
request.user.profile.image, upsert=True)
return render(request, 'geotracker/home.html', context)
我無法弄清楚ajax jquery語句,但是我發現我可以只使用普通AXAJ來使用XMLHttpRequest發送Post請求。 使用這種方法,我無需提交頁面即可從Mapbox Api獲取用戶位置,從而能夠提交帶有發布請求的表單。 我只需要從Django的“管理”面板中發送身份驗證令牌,即可從發送到模板的python變量中獲取身份驗證令牌。
geolocate.on('geolocate', function(e) {
console.log('locating...');
var lon = e.coords.longitude;
var lat = e.coords.latitude
var position = lon + " " + lat;
var element = document.getElementById('location');
element.value = position;
var url = 'http://localhost:8000'
var params = JSON.stringify({
longitude: lon,
latitude: lat
});
// Create a new AJAX request object
var request = new XMLHttpRequest();
// Open a connection to the server
request.open('POST', url, true);
// Actually send the request
var csrftoken = '{{ csrf_token }}'
request.setRequestHeader("Content-type", "application/json");
request.setRequestHeader('X-CSRFToken', csrftoken);
request.send(params);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.