用ajax提交数据到后台：
{#<!DOCTYPE html>#}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.2.1.min.js"></script>
<style>
.sp{
color: red;
}
</style>
</head>
<body>
<p>姓名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p>
<button class="sub">提交</button><span class="sp"></span>
</p>
<script>
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
$.ajax({
url: "/demo_ajax/",
type: "POST",
data: {
username: $(":text").val(),
password: $(":password").val()
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})
</script>
</body>
</html>
前端采取这种方式提交会报forbidden的错误是因为没有加csrf_token，可是这个不是采用form表单的方式提交的：
怎么解决这种问题呢？一般来说解决这种问题的办法有三种，下边就说一下这三种方式都怎么用：
方式一：
在提交ajax请求的时候给他事先设置一个值：
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
#######################################
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
});
#######################################
$.ajax({
url: "/demo_ajax/",
type: "POST",
data: {
username: $(":text").val(),
password: $(":password").val()
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})
方式二：
body部分：
<form action="">
{% csrf_token %}
<p>姓名：<input type="text"></p>
<p>密码：<input type="password"></p>
</form>
<p>
<button class="sub">提交</button><span class="sp"></span>
</p>
button要写在外边，否则会默认以get提交
----------------------------------------------------------------------------------------
这里是js代码：
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
$.ajax({
url: "/demo_ajax/",
type: "POST",
data: {
username: $(":text").val(),
password: $(":password").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})
方式三：
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
$.ajax({
url: "/demo_ajax/",
type: "POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data: {
username: $(":text").val(),
password: $(":password").val()
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})
方式三可以在form表单提交，也可以不在form表单中提交：