用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表单中提交: