2017-12-06 2 views
0

gefolgt von vielen der auf StackOverflow empfohlenen Sachen. Ich habe auch versucht, {% csrf_token%} an verschiedenen Stellen in den HTML-Code zu schreiben, aber keiner schien zu funktionieren. Irgendwelche Vorschläge?csrf token fehlt oder ist inkorrekt

Hier ist meine django Vorlagen Eingabeknopf

<input id=saveWaypoints type=button value='Save your Location' disabled=disabled> 

die in diesem Javascript

$('#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); 
        } 
       }); 
      }); 

Meine komplette 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> 

Mein views.py

ist ist Code ruft
def save(request): 
    'Save waypoints' 


    for waypointString in request.POST.get('waypointsPayload', '').splitlines(): 
     waypointID, waypointX, waypointY = waypointString.split() 
     waypoint = Waypoint.objects.get(id=int(waypointID)) 
     waypoint.geometry.set_x(float(waypointX)) 
     waypoint.geometry.set_y(float(waypointY)) 
     waypoint.save() 
    return HttpResponse(simplejson.dumps(dict(isOk=1)), mimetype='application/json') 

Irgendwelche Vorschläge bitte. Dank

+1

Django Vorschlag ist hier https://docs.djangoproject.com/en/1.11/ref/csrf/#setting-the-token-on-the-ajax -Anfrage. Es wird Anforderungskopf gesetzt. – MarshalSHI

+0

Ich habe versucht, diesen Code, aber dann Karte wird nicht durch die Vorlage – srk

+0

Ur Karte sollte nicht im Zusammenhang mit diesem Ajax Anruf. Es ist eine Google Map API. Sie können Ihre Django-Ansicht überprüfen, ob die Postanfrage korrekt ist. Wenn ja, dein Ajax-Problem gelöst. – MarshalSHI

Antwort

0

Das ist für mich gearbeitet:

$.post("{% url 'waypoints-save' %}", { 
    'csrfmiddlewaretoken': '{{ csrf_token }}', 
} 
Verwandte Themen