ajax CSRF

With ajax submit data to the background:

{#<!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>

　The front end of such an approach will submit a bug report is forbidden because there is no increase csrf_token, but instead of using this form of submission of the form:

How to solve this problem? In general way to solve this problem in three ways, said the following about how to use these three methods are:

method one:

Provided to him in advance of the time of filing a ajax request value: 
function foo () { 
            $ ( "SP.") HTML ( "");. 
        } 
    $ ( "Sub.") The Click (function () {. 
### #################################### 
        $ .ajaxSetup ({ 
            Data: {csrfmiddlewaretoken: '{{csrf_token }} '} 
        }); 
####################################### 
        $ .ajax ( { 
            URL: "/ demo_ajax /", 
            type: "the POST", 
            Data: { 
                username: $ ( ": text") Val (),. 
                password: $. ( ": password") Val () 
            }, 
            Success: function (Data) { 
                var = the JSON Data.parse(data);
                IF (! Data [ "In Flag"]) {
                    $ ( ". sp"). html ( " user name or password is incorrect"), 
                    the setTimeout (foo, 3000) 
                } 
            } 
        }) 
    })

Second way:

body part: 
<form Action = ""> 
{% csrf_token%} 
<P> Name: <INPUT type = "text"> </ P> 
<P> Password: <INPUT type = "password"> </ P> 
< / form> 
<the p-> 
    <the Button class = "Sub"> submit </ the Button> <span class = "SP"> </ span> 
</ the p-> 
the Button to write on the outside, otherwise it will default to get submission 
--- -------------------------------------------------- ----------------------------------- 
here js code: 
    function foo () { 
        $ ( "SP. ") .html (" "); 
    } 
    $ (" Sub. ") the Click (function (.) { 
        $ .ajax ({ 
            URL:" / demo_ajax / ", 
            type:"POST",
            data: {
                username: $(":text").val(),
                password: $(":password").val(),
                csrfmiddlewaretoken: $ ( "[name = 'csrfmiddlewaretoken']") Val (),. 
            }, 
            Success: function (Data) { 
                var = the JSON.parse Data (Data); 
                IF {(Data [ "In Flag"]!) 
                    $ ( ".sp"). html ( " user name or password is incorrect"), 
                    the setTimeout (foo, 3000) 
                } 
            } 
        }) 
    })

Three ways:

        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)
                }
            }
        })
    })

Three ways you can submit the form in form, you can not submit form form:

Source Address: https://www.cnblogs.com/52-qq/