07-csrf-526互联

ajax的两种crsf验证

# 1. 在试图函数上加上装饰器

# 2. ajax提交数据时,携带csrf: 放在data中携带

# 引用的js: 
  https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js

1. @csrf_exempt装饰器

@csrf_exempt
def login(request):
    if request.method == "POST":
        return JsonResponse({"code": 0, "msg": "登陆成功"})

    return render(request, "login.html")

<form>
    <input type="text" id="username" name="username">
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    function submitForm() {
        $.ajax({
            url: "/hello/login/",
            type: "POST",
            data: {
                "user": $("#username").val(),
            },
            success: function (arg) {
                console.log(arg)
            }

        })
    }
</script>

2. data中携带(绑定函数)

def handle_ajax(request):
    if request.is_ajax():
        return JsonResponse({"code": 0, "msg": "登陆成功"})
    return render(request, "ajax.html")

<form>
    {% csrf_token %}
    <input type="text" id="username" name="username">
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    function submitForm() {
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
        console.log(csrf)
        var user = $('#username').val();
        $.ajax({
            url: "/hello/ajax/",
            type: "POST",
            data: {"user": user, 'csrfmiddlewaretoken': csrf},
            success: function (arg) {
                console.log(arg)
            }

        })
    }
</script>

3. data中携带(使用id)

def register(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        # ajax请求,一般返回json格式数据
        return JsonResponse({"code":1})
    return render(request, "app03/register.html")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    用户名:<input type="text" name="username"><br>
    密码:<input type="text" name="password"><br>
    <input type="button" value="注册" id="button">
</form>

# 1. 部分提交
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    $("#button").click(function(){
        username=$("[name=username]").val();
        password=$("[name=password]").val();
        csrf = $("[type=hidden]").val();
        console.log(username,password,csrf);
        {# 第一个参数:地址;第二个:参数;第三个:返回的数据; #}
        $.post("/register/",{"username":username,"password":password,"csrfmiddlewaretoken":csrf},
        function(data){
            console.log(data)
        })

    })
</script>
</body>
</html>

# 2. 直接提交form表单所有内容:使用serialize()
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    $("#button").click(function () {
        $.post("/register/", $("form").serialize(),function (data) {
                console.log(data)
            })
    })
</script>
</body>
</html>