内容:
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