jquery - 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";
}
}
...
视图.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)
网址.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':
在你看来。
推荐阅读
- javascript - ReactJS 单击并按住按钮
- vba - 如果不存在,VBA 创建新的工作表
- android - android studi0中的节点json
- dart - 颤动过渡到带有动画的新页面
- java - 在 Spring Boot 2 中忽略 ConfigurationProperties 的未绑定属性
- git - Migrating from VSS to Git while keeping the history
- angular - angular & migration openlayers to ol & proj4js
- python - 如何覆盖熊猫中的合并方法?
- python - Python:如何将字符串转换为集合
- swift - 插入动态单元格并滚动到底部时,Tableview 滞后