CSRF验证失败请求中止没有表格

问题描述

当我使用ajax / jquery调用js函数时，收到“ CSRF验证失败。请求中止”网络错误。据我了解，这通常与表单相关联，但是我的这段代码中没有任何表单。我尝试将{% csrf_token %}添加到我的按钮中，但没有任何反应。我将不胜感激。谢谢！

modCalc.html

{% extends 'base.html' %}

{% block title %}Modulo Calculator{% endblock %}

{% block content %}
{% block nav-modCalc %}<a href="#" class='active'>Modulo Calculator</a>{% endblock %}
<div class='main'>
{% if user.is_authenticated %}
    <div class='leftAndRight'>
      <p id='highscore' class='highscore'>Highscore: {{ user.highscore }}</p>
      <p id='timer' class='timer'>0:00</p>
    </div>
    <br />
    <br />
    <div class="center">
      <p id='level' class='level'>Level 1</p>
    </div>
    <div class="center">
      <button onclick='generateNums();' id='generate' class='generate'>Generate Problem</button>
    </div>
    <div class='formulaDiv'>
      <span class='formula'><p id='num1' class='num'></p></span> 
      <span class='formula'><p class='symbol'>%</p></span> 
      <span class='formula'><p id='num2' class='num'></p></span>
      <span class='formula'><p class='symbol'>=</p></span> 
      <span class='formula'><input type='number' id='answer' class='answer'></input></span>
    </div>
    <p id='required' class='required'></p>
    <div class='center'>
      <button onclick='checkAnswer();' id='grade' class='grade' disabled>Grade</button>
    </div>
    <div class='leftAndRight'>
      <p id='results' class='results'></p>
      <p id='inRow' class='inRow'></p>
    </div>
    

{% else %}
  <p>You are not logged in</p>
{% endif %}
</div>
{% endblock %}

modCalc.js

...
function checkAnswer(){
    if(document.getElementById('answer').value != ""){
        if(num1 % num2 === parseInt(document.getElementById('answer').value)){
            inRow++;
            if(inRow > highscore){
                highscore = inRow;
                document.getElementById("highscore").innerHTML = "Highscore: " + highscore;
                $.ajax({
                    url: siteURL + 'accounts/update_highscore/',data: {'highscore': highscore},type: 'POST'
                  }).done(function(response){
                    console.log(response);
                  });
            }
            document.getElementById('results').innerHTML = "Correct!";
        }
        else{
            document.getElementById('results').innerHTML = "Oops...The right answer was: " + num1 + " % " + num2 + " = " + (num1 % num2);
            document.getElementById('answer').value = "";
            inRow = 0;
        }
        document.getElementById('inRow').innerHTML = inRow + " correct in a row";
        level = Math.floor(inRow / 10) + 1;
        document.getElementById('level').innerHTML = "Level " + level;
        clearInterval(timer);
        document.getElementById('timer').innerHTML = "0:00";
        document.getElementById("generate").disabled = false;
        document.getElementById('grade').disabled = true;
        document.getElementById('answer').value = "";
        document.getElementById("num1").innerHTML = "";
        document.getElementById("num2").innerHTML = "";

    }
    else{
        document.getElementById('required').innerHTML = "Please enter an answer";
    }
    
}
...

views.py

from .forms import CustomUserCreationForm
from django.urls import reverse_lazy
from django.views import generic
from django.http import HttpResponse
from .models import CustomUser

class SignUp(generic.CreateView):
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('login')
    template_name = 'signup.html'

def update_highscore(request):
    if request.method == 'POST':
        user = CustomUser.objects.get()
        user.highscore =  request.POST['highscore']
        user.save()
        message = 'update successful'
    return HttpResponse(message)

urls.py

from django.urls import path
from django.conf.urls import url
from .views import update_highscore

from . import views


urlpatterns = [
    path('signup/',views.SignUp.as_view(),name='signup'),url(r'^update_highscore/',update_highscore)
]

解决方法

您必须将method = POST附加到您的按钮上，然后它将按您的使用习惯

if request.method == 'POST': 

您认为