django中使用Ajax

Posted 2021-01-07 woz333333

内容：

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：

 1 # Ajax get请求的后端处理函数
 2 def ajax_add(request):
 3     print(request.GET)
 4     print(request.GET.get("i1"))
 5     print(request.GET.get("i2"))
 6 
 7     i1 = int(request.GET.get("i1"))
 8     i2 = int(request.GET.get("i2"))
 9 
10     ret = i1 + i2
11     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：

1 # Ajax post请求的后端处理函数
2 def ajax_add3(request):
3     print(request.POST)
4     print("-" * 120)
5     i1 = int(request.POST.get("i1"))
6     i2 = int(request.POST.get("i2"))
7 
8     ret = i1 + i2
9     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 post提交" id="b3">
 5 
 6 <script src="/static/jquery-3.3.1.js"></script>
 7 <script src="/static/setupajax.js"></script>
 8 <script>
 9     $("#b3").on("click", function () {
10         var i1 = $("#i1").val()
11         var i2 = $("#i2").val()
12         // 往后端发数据
13         $.ajax({
14             url: "/ajax_add3/",
15             type: "post",
16             data: {"i1": i1, "i2": i2},
17             success: function (arg) {
18                 {#alert(arg);#}
19                 // 把返回的结果填充到 id是i3的input框中
20                 $("#i3").val(arg)
21             }
22         })
23     })
24 </script>

 

 

4.Ajax上传文件

 1 // 上传文件示例
 2 $("#b1").click(function () {
 3     var formData = new FormData();
 4     formData.append("csrfmiddlewaretoken", $("[name=\'csrfmiddlewaretoken\']").val());
 5   formData.append("f1", $("#f1")[0].files[0]);
 6     $.ajax({
 7         url: "/upload/",
 8         type: "POST",
 9         processData: false,  // 告诉jQuery不要去处理发送的数据
10         contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
11         data: formData,
12         success:function (data) {
13             console.log(data)
14     }
15   })
16 })

 

 

5.Ajax设置csrf_token

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

 1 $.ajax({
 2   url: "/cookie_ajax/",
 3   type: "POST",
 4   data: {
 5     "username": "xxx",
 6     "password": 123456,
 7     // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
 8     "csrfmiddlewaretoken": $("[name = \'csrfmiddlewaretoken\']").val() 
 9   },
10   success: function (data) {
11     console.log(data)
12   }
13 })

 

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

 1 // 引入一个jquery.cookie.js插件，然后写以下代码:
 2 
 3 $.ajax({
 4   url: "/cookie_ajax/",
 5   type: "POST",
 6   // 从Cookie取csrftoken，并设置到请求头中
 7   headers: {"X-CSRFToken": $.cookie(\'csrftoken\')},    
 8   data: {"username": "xxx", "password": 123456},
 9   success: function (data) {
10     console.log(data);
11   }
12 })

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

 1 function getCookie(name) {
 2     var cookieValue = null;
 3     if (document.cookie && document.cookie !== \'\') {
 4         var cookies = document.cookie.split(\';\');
 5         for (var i = 0; i < cookies.length; i++) {
 6             var cookie = jQuery.trim(cookies[i]);
 7             // Does this cookie string begin with the name we want?
 8             if (cookie.substring(0, name.length + 1) === (name + \'=\')) {
 9                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
10                 break;
11             }
12         }
13     }
14     return cookieValue;
15 }
16 
17 // 在cookie中获取csrftoken
18 var csrftoken = getCookie(\'csrftoken\');
19 
20 function csrfSafeMethod(method) {
21   // these HTTP methods do not require CSRF protection
22   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
23 }
24 
25 // 为每次Ajax请求之前执行该函数
26 // 只要在使用Ajax的地方之前导入即可
27 $.ajaxSetup({
28   beforeSend: function (xhr, settings) {
29     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
30       xhr.setRequestHeader("X-CSRFToken", csrftoken);
31     }
32   }
33 });

 

注：

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

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

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

1 django.views.decorators.csrf import ensure_csrf_cookie
2 
3 @ensure_csrf_cookie
4 def login(request):
5     pass

 

 

6.django序列化

(1)什么是序列化

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

 

(2)django序列化

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

1 from django.core import serializers
2 
3 def books_json(request):
4     book_list = models.Book.objects.all()[0:10]
5     ret = serializers.serialize("json", book_list)
6     return HttpResponse(ret)