Django中使用Ajax及避开CSRF 验证的方式详解

最新推荐文章于 2022-11-23 22:28:09 发布

liuwangleoooO

最新推荐文章于 2022-11-23 22:28:09 发布

阅读量396

点赞数 1

分类专栏： # Django项目实战文章标签： ajax django

本文链接：https://blog.csdn.net/qq_36581961/article/details/113738639

版权

Django项目实战专栏收录该内容

16 篇文章 6 订阅

订阅专栏

文章目录

向服务器发送GET请求
向服务器发送POST请求
- 通过 csrf_token 认证
- 视图层或者urls添加装饰器

ajax(Asynchronous Javascript And Xml)异步javascript和XML。本文实例讲述了django框架中ajax的使用及避开CSRF 验证的方式。
ajax的优点

使用javascript技术向服务器发送异步请求
ajax无须刷新整个页面；
由于ajax响应的是局部页面，因此性能要高

向服务器发送GET请求

views.py

from django.http import HttpResponse
from django.shortcuts import render


def get_html(request):
    return render(request, 'ajax/test_ajax.html')


def test_ajax_get(request):
    name = request.GET.get("name", '')
    print(name)
    if name:
        res = {"code": "200", "msg": "√"}
    else:
        res = {"code": "000", "msg": "请输入用户名"}
    import json
    return HttpResponse(json.dumps(res))  # 向ajax发送json数据

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>
<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
    $("#user").blur(function () {   //鼠标失去焦点事件
        $.ajax({
            url: "/ajax_test/get_/",
            type: "get",
            data: {"name": $("#user").val()},
            success: function (data) {
                console.log(data);
                console.log(typeof data);
                var data = JSON.parse(data); //接收传来的信息，进行反序列化，这里JSON要输入大写否则出不来
                console.log(data);
                console.log(typeof data);
                if (data.code == "200") {
                    $(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
                }
                else{
                    $(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
                }
            }
        })
    });
</script>
</body>
</html>

向服务器发送POST请求

以post的方式提交，存在crsf的问题，解决跨域伪造csrf的方法有三种

CSRF 简介
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过 HTTP 请求江数据传送到服务器，从而盗取回话的 cookie。盗取回话 cookie 之后，攻击者不仅可以获取用户的信息，还可以修改该 cookie 关联的账户信息。
所以解决 CSRF 攻击的最直接的办法就是生成一个随机的 csrftoken 值，保存在用户的页面上，每次请求都带着这个值过来完成校验。

通过 csrf_token 认证

方式 1 通过 input 标签获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<input type="text" name="csrfmiddlewaretoken" value="{{ csrf_token }}" hidden>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>

<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
    // var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
    //下面改成post请求如何避免crsf错误呢
    $("#user").blur(function () {
        $.ajax({
            url: "/ajax_test/post_/",
            type: "post",
            data: {
                "name": $("#user").val(),
                "csrfmiddlewaretoken": $('[name="csrfmiddlewaretoken"]').val(),
                // "csrfmiddlewaretoken": "{{csrf_token}}" // 直接也可以
            },

            success: function (data) {
                console.log(data);
                console.log(typeof data);
                var data = JSON.parse(data);
                console.log(data);
                console.log(typeof data);
                if (data.code == "200") {
                    $(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
                }
                else {
                    $(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
                }
            }
        })
    });
</script>
</body>
</html>

方式 2 通过 Cookie 获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<input type="text" name="csrfmiddlewaretoken" value="{{ csrf_token }}" hidden>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>

<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script> 
    //下面改成post请求如何避免crsf错误呢
    $("#user").blur(function () {
        $.ajax({
            url: "/ajax_test/post_/",
            type: "post",
            data: {
                "name": $("#user").val(),
                headers: {"X-CSRFToken": $.cookie('csrftoken')},  //方式三
            },
            success: function (data) {
                console.log(data);
                console.log(typeof data);
                var data = JSON.parse(data);
                console.log(data);
                console.log(typeof data);
                if (data.code == "200") {
                    $(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
                }
                else {
                    $(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
                }
            }
        })
    });

</script>
</body>
</html>

视图层或者urls添加装饰器

views.py

from django.views.decorators.csrf import csrf_exempt  # 导入
@csrf_exempt
def test_ajax_post(request):
    name = request.POST.get("name", '')
    print(name)
    if name:
        res = {"code": "200", "msg": "√"}
    else:
        res = {"code": "000", "msg": "请输入用户名"}
    import json
    return HttpResponse(json.dumps(res))  # 向ajax发送json数据

或者urls.py

from django.urls import path
from django.views.decorators.csrf import csrf_exempt  # 导入
from ajax import views

urlpatterns = [
    path('post_/', csrf_exempt(views.test_ajax_post)),
]

liuwangleoooO

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Django中使用Ajax及避开CSRF 验证的方式详解

文章目录向服务器发送GET请求向服务器发送POST请求通过 csrf_token 认证视图层或者urls添加装饰器ajax(Asynchronous Javascript And Xml)异步javascript和XML。本文实例讲述了django框架中ajax的使用及避开CSRF 验证的方式。ajax的优点使用javascript技术向服务器发送异步请求ajax无须刷新整个页面；由于ajax响应的是局部页面，因此性能要高向服务器发送GET请求views.pyfrom django.ht
复制链接

扫一扫