Django Ajax和CSRF

JSON

• JSON是指JavaScript对象表示法（JavaScript Object Notation）

• JSON是轻量级的文本数据交换格式

JSON.parse()：将一个JSON字符串转为JavaScript对象

var json_str = '{"name":"Tom","age":20}';
var json_obj = JSON.parse(json_str);

JSON.stringify()：将JavaScript对象转JSON字符串

var json_obj = {name: "Tom", age: 12};
var json_str = JSON.stringify(json_obj);

Ajax

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

<input type="text" placeholder="用户名" id="username">
<input type="password" placeholder="密码" id="password">
<input type="button" value="提交" id="btn">
<span id="warning"></span>


<script>
    $('#btn').on('click', function () {
        $.ajax({
                url: '/ajax/login/',
                type: 'POST',
                data: {'username': $('#username').val(), 'password': $('#password').val()},
                success: function (data) {
                    $('#warning').text(data);
                }
            }
        );
    });
</script>

from django.shortcuts import render, HttpResponse

def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        if username == 'Tom' and password == '123456':
            return HttpResponse('登录成功')
        else:
            return HttpResponse('登录失败')
    return render(request, 'ajax/login.html')

Ajax与csrf

方式一

获取隐藏的input标签重点csrfmiddlewaretoken值，放在data中发送。

  $('#btn').on('click', function () {
        $.ajax({
                url: '/ajax/login/',
                type: 'POST',
                data: {
                    'username': $('#username').val(),
                    'password': $('#password').val(),
                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    $('#warning').text(data);
                }
            }
        );
    });

方式二

通过cookie获取，放在请求体中发送。

<script>
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    var csrftoken = getCookie('csrftoken');


    $('#btn').on('click', function () {
        $.ajax({
                url: '/ajax/login/',
                type: 'POST',
                headers: {
                    "X-CSRFToken": csrftoken
                },
                data: {
                    'username': $('#username').val(),
                    'password': $('#password').val()
                },
                success: function (data) {
                    $('#warning').text(data);
                }
            }
        );
    });

如果你的视图渲染HTML文件中没有包含{% csrf_token %}，Django可能不会设置CSRFtoken的cookie

这时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass

文件上传

<label>文件上传</label>
<input type="file" id="upload_file">
<button id="btn">文件上传</button>

<script>
    $('#btn').on('click', function () {
        var formData = new FormData();
        var fileInfo = $('#upload_file')[0].files[0];
        formData.append('file', fileInfo);

        $.ajax({
            url: '/ajax/upload/',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

def upload(request):
    if request.method == 'POST':
        file_obj = request.FILES.get('file')
        if file_obj:
            with open(file_obj.name, 'wb') as file:
                for i in file_obj.chunks():
                    file.write(i)
            return HttpResponse('上传成功')
    return render(request, 'ajax/upload.html')