Django 框架篇(八): Django处理Ajax请求

一. Ajax 简介:

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

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

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

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

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

详情请见: 前端之jQuery 中的Ajax交互方式

二. JSON字符串介绍:

定义:

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

javascript中  对象 转化成json字符串的方法: 

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。　

JSON.stringify({"name":"alex"})

javascript中  json字符串 转化成 js对象的方法: 

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　

JSON.parse('{"name":"alex"}');

三. Django处理Ajax的post请求:

正常的Django处理form表单中的post请求:

　　因为django中中间件的保护机制, 需要对请求中的cookie和表单中的  "csrfmiddlewaretoken"  进行匹配,所以需要在页面中加上 {% csrf_token %} 标签来进行验证;

　　而Ajax中的请求不是通过form表单进行发送的, 所以, 就需要想办法 获取到  "csrfmiddlewaretoken"  所对应的值, 一起发过去.

如何获取 "csrfmiddlewaretoken"  所对应的值

1. 通过jQuery的属性选择器获取:

　　在这里还需要在html中 加入{% csrf_token %} 标签

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Q1mi",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

2. 通过获取cookie中的 'csrftoken' 在请求头中添加 "X-CSRFToken" 对应的键值对:

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrftoken，并设置到请求头中
  data: {"username": "Q1mi", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

3.  自己从新写一个获取cookie的js方法:

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');
// 上面是 自定义的 获取的 csrftoken

-------------------------------------------------------------------------------------

// 下面是更改一下 ajax的初始化配置, 让每次的 ajax请求都提前添加 cookie的请求头

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

注意: 

　　以上 方法都必须保证在页面加载的时候 cookie存在csrftoken的值.

　　如果 html模板中没有包含 {% csrf_token %} 标签的话, django将不会设置 cookie;

　　此时可以用  django.views.decorators.csrf  包中的 ensure_csrf_cookie 函数来进行装饰被访问的 视图函数  示例:

from django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def login(request):
    pass

　　官方有关csrf的解释文档

示例: 利用ajax上传文件:

// 上传文件示例
$("#b3").click(function () {
  var formData = new FormData();
  formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
  formData.append("f1", $("#f1")[0].files[0]);
  $.ajax({
    url: "/upload/",
    type: "POST",
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
    data: formData,
    success:function (data) {
      console.log(data)
    }
  })
})