内容：
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)
原文地址：https://www.cnblogs.com/wyb666/p/9688670.html
时间： 2024-11-05 21:45:43