AJAX

AJAX

AJAX准备知识：JSON

什么是 JSON ？

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言 *
• JSON 具有自我描述性，更易理解

AJAX简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

特点：

• AJAX使用JavaScript技术向服务器发送异步请求；
• AJAX请求无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

ajax发送请求

$.ajax({
    url: '/ajax_test/',         # 求情的地址
    type: 'post',               # 请求的类型
    data: {                     # 请求的数据
        username: 'root',   
        pwd: '123',
        info: JSON.stringify(['111', '222', '333'])     # json格式数据
    },
    success: function (res) {   # 正常响应的回调函数
        alert(res);
    },
    error: function (res) {     # 错误响应的回调函数
        console.log(res)
    }
})

ajax上传文件

html+js

<form action="" enctype="multipart/form-data"></form>
<input type="file" name="file">
<button id="btn2">上传文件</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $('#btn2').click(function () {
        var form_boj = new FormData();
        form_boj.append('file', $('[name="file"]')[0].files[0]);
        $.ajax({
            url: '/upload/',
            type: 'post',
            processData: false, {# 不需要处理数据编码格式 #}
            contentType: false, {# 不需要处理请求头 #}
            data: form_boj,
        })

    })
</script>

view

def upload(request):
    if request.is_ajax():
        file_obj = request.FILES.get('file')
        with open(file_obj.name, 'wb')  as f:
            for i in file_obj.chunks():
                f.write(i)
        return HttpResponse('上传成功')
    return HttpResponse('233')

Ajax发送POST请求

页面中使用{% csrf_token %}，给POST提交数据中添加csrfmiddlewaretoken的键值对

    $('#btn3').click(function () {
        $.ajax({
            url: 'index',
            type: 'post',
            data: {
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
                data: JSON.stringify({
                    'info': '666',
                })
            },
            success: function (res) {
                alert(res)
            }
        })
    })

添加X-csrftoken的请求头

    $('#btn4').click(function () {
        $.ajax({
            url: 'index',
            type: 'post',
            headers: {
                'X-csrftoken': $('[name="csrfmiddlewaretoken"]').val(),
            },
            data: {
                data: JSON.stringify({
                    'info': '666',
                })
            },
            success: function (res) {
                alert(res)
            }
        })
    })

写个JS文件引入，从cookie中获取值，添加到请求头中，必须确保有csrftoken的cookie。

如果html页面没有包含{% csrf_token %},Django可能不会设置CSRFtoken的cookie，使用ensure_csrf_cookie装饰器，强制设置cookie
from django.views.decorators.csrf import ensure_csrf_cookie

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');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});