0
StackOverflowで推奨されているものがたくさんあります。また、さまざまな場所で{％csrf_token％}をhtmlに入れようとしましたが、うまくいきませんでした。助言がありますか？ここでcsrfトークンが見つからないか間違っています
は私の完全なJavaScriptコードが
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Maps | {% block title %}{% endblock %}</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var map, marker, waypointByID = {};
var currentObject;
var map;
var geocoder;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(41.879535, -87.624333),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
}
$(function() {
});
{% for waypoint in waypoints %}
waypointByID[{{waypoint.id}}] = {
name: "{{waypoint.name}}",
lat: {{waypoint.geometry.y}},
lng: {{waypoint.geometry.x}}
};
{% endfor %}
var currentObject;
$(document).ready(function() {
function activateWaypoints() {
// Add waypoint click handler
$('.waypoint').each(function() {
$(this).click(function() {
var waypoint = waypointByID[this.id];
var center = new google.maps.LatLng(waypoint.lat, waypoint.lng);
currentObject = $(this);
if (marker) marker.setMap();
marker = new google.maps.Marker({map: map, position: center, draggable: true});
google.maps.event.addListener(marker, 'dragend', function() {
var position = marker.getPosition();
waypoint.lat = position.lat();
waypoint.lng = position.lng();
currentObject.html(waypoint.name +
' (' + waypoint.lat +
', ' + waypoint.lng + ')');
$('#saveWaypoints').removeAttr('disabled');
});
map.panTo(center);
}).hover(
function() {this.className = this.className.replace('OFF', 'ON');},
function() {this.className = this.className.replace('ON', 'OFF');}
);
});
}
$('#saveWaypoints').click(function() {
var waypointStrings = [];
for (id in waypointByID) {
waypoint = waypointByID[id];
waypointStrings.push(id + ' ' + waypoint.lng + ' ' + waypoint.lat);
};
$.post("{% url 'waypoints-save' %}", {
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
waypointsPayload: waypointStrings.join('\n')
}, function (data) {
if (data.isOk) {
$('#saveWaypoints').attr('disabled', 'disabled');
} else {
alert(data.message);
}
});
});
activateWaypoints();
});
</script>
<style>
body {font-family: sans-serif}
#map {width: 1000px; height: 500px}
#waypoints {overflow: auto; width: 500px; height: 100px}
.linkOFF {color: darkblue}
.linkON {color: white; background-color: darkblue}
</style>
</head>
<body>
<div id="nav">
<a href="/">home</a> |
{% if user.is_authenticated %}
welcome {{ user.username }}
(<a href="/logout">logout</a>)
{% else %}
<a href="/login/">login</a> |
<a href="/register/">register</a>
{% endif %}
</div>
<h1>{% block head %}{% endblock %}</h1>
{% block content %}{% endblock %}
</body>
<body onload='initialize()'>
<div id=map></div>
<div id=waypoints>
{% for waypoint in waypoints %}
<div id={{waypoint.id}} class='waypoint linkOFF'>
{{waypoint.name}} ({{waypoint.geometry.y}}, {{waypoint.geometry.x}})
</div>
{% endfor %}
</div>
<input id=saveWaypoints type=button value='Save your Location' disabled=disabled>
</body>
</html>
私のviews.pyが
である$('#saveWaypoints').click(function() {
var waypointStrings = [];
for (id in waypointByID) {
waypoint = waypointByID[id];
waypointStrings.push(id + ' ' + waypoint.lng + ' ' + waypoint.lat);
};
$.post("{% url 'waypoints-save' %}", {
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
waypointsPayload: waypointStrings.join('\n')
}, function (data) {
if (data.isOk) {
$('#saveWaypoints').attr('disabled', 'disabled');
} else {
alert(data.message);
}
});
});
はJavaScriptこれを呼び出して、私のDjangoのテンプレート入力ボタン
<input id=saveWaypoints type=button value='Save your Location' disabled=disabled>
です
ご提案ください。おかげ
Djangoの提案はここにあるhttps://docs.djangoproject.com/en/1.11/ref/csrf/#setting-the-token-on-the-ajax -request。リクエストヘッダーが設定されます。 – MarshalSHI
私はそのコードを試しましたが、マップはテンプレートによって示されていません – srk
Urマップはこのajax呼び出しに関連するべきではありません。それはGoogleマップAPIです。 ur djangoが正しい投稿要求を受け取ったかどうかを確認することができます。もしそうなら、あなたのajax問題は解決されました。 – MarshalSHI