django中使用Ajax

内容：

1.Ajax原理与基本使用

2.Ajax发送get请求

3.Ajax发送post请求

4.Ajax上传文件

5.Ajax设置csrf_token

6.django序列化

 

参考：https://www.cnblogs.com/liwenzhou/p/8718861.html

 

1.Ajax原理与基本使用

关于Ajax的原理及其基本使用，直接看这篇博文即可：https://www.cnblogs.com/wyb666/p/9387488.html

 

 

2.Ajax发送get请求

views.py：

# Ajax get请求的后端处理函数
def ajax_add(request):
    print(request.GET)
    print(request.GET.get("i1"))
    print(request.GET.get("i2"))

    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))

    ret = i1 + i2
    return HttpResponse(ret)

前端代码：

 1 <input type="text" id="i1">+
 2 <input type="text" id="i2">=
 3 <input type="text" id="i3">
 4 <input type="button" value="AJAX get提交" id="b1">
 5 
 6 <script src="/static/jquery-3.3.1.js"></script>
 7 <script>
 8     $("#b1").on("click", function () {
 9         var i1 = $("#i1").val()
10         var i2 = $("#i2").val()
11         // 往后端发数据
12         $.ajax({
13             url: "/ajax_add/",
14             type: "get",
15             data: {"i1": i1, "i2": i2},
16             success: function (arg) {
17                 {#alert(arg);#}
18                 // 把返回的结果填充到 id是i3的input框中
19                 $("#i3").val(arg)
20             }
21         })
22     })
23 </script>

 

 

3.Ajax发送post请求

views.py：

# Ajax post请求的后端处理函数
def ajax_add3(request):
    print(request.POST)
    print("-" * 120)
    i1 = int(request.POST.get("i1"))
    i2 = int(request.POST.get("i2"))

    ret = i1 + i2
    return HttpResponse(ret)

前端代码：

<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX post提交" id="b3">

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/setupajax.js"></script>
<script>
    $("#b3").on("click", function () {
        var i1 = $("#i1").val()
        var i2 = $("#i2").val()
        // 往后端发数据
        $.ajax({
            url: "/ajax_add3/",
            type: "post",
            data: {"i1": i1, "i2": i2},
            success: function (arg) {
                {#alert(arg);#}
                // 把返回的结果填充到 id是i3的input框中
                $("#i3").val(arg)
            }
        })
    })
</script>

 

 

4.Ajax上传文件

// 上传文件示例
$("#b1").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)
    }
  })
})

 

 

5.Ajax设置csrf_token

(1)通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送

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

 

(2)通过获取返回的cookie中的字符串 放置在请求头中发送

// 引入一个jquery.cookie.js插件，然后写以下代码:

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

或者这样(推荐这样写)：

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

// 在cookie中获取csrftoken
var csrftoken = getCookie('csrftoken');

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

// 为每次Ajax请求之前执行该函数
// 只要在使用Ajax的地方之前导入即可
$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

 

注：

如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。

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

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

django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass

 

 

6.django序列化

(1)什么是序列化

序列化：将字符串转换成json格式的数据便于后端将数据发送给前端处理

 

(2)django序列化

使用django内置的serializers进行序列化：

from django.core import serializers

def books_json(request):
    book_list = models.Book.objects.all()[0:10]
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)