Django高級-AJAX應用
阿新 • • 發佈：2018-10-07
.sh cli user 獨立 prot rom demo print input標簽 
預備知識JSON
什麽是JSON
JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本數據交換格式
JSON 獨立於語言
JSON 具有自我描述性，更易理解
JavaScript和python的區別
Django內置的序列化
from django.shortcuts import HttpResponse from django.core import serializers from app01 import models def person(request): ret = models.Person.objects.all() ret1= models.Person.objects.all().values() print(ret) print(ret1) s = serializers.serialize(‘json‘, ret) print(s) return HttpResponse(s)
發請求的方式
1. 直接在地址欄輸入URL回車 GET請求
2. a標簽 GET請求
3. form表單 GET/POST請求
4. AJAX GET/POST請求
AJAX特點
特點
1. 異步
2. 局部刷新瀏覽器（偷偷發請求）
缺點
請求零碎，濫用對服務端壓力大
語法
$.ajax({ url: ‘/check/‘, // 往哪裏發 type: ‘post‘, // 以什麽方式發 data: {username: $username}, // 發送的數據 success: function (arg) { // 請求得到相應的時候要執行的 console.log(arg); $(".e1").text(arg).css(‘color‘,‘red‘) }
示例
<!DOCTYPE html> <html lang="ajax_demo1.htmlen"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AJAX局部刷新實例</title> </head> <body> <input type="text" id="i1">+ <input type="text" id="i2">= <input type="text" id="i3"> <input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.2.1.min.js"></script> <script> $("#b1").on("click", function () { $.ajax({ url:"/ajax_add/", type:"GET", data:{"i1":$("#i1").val(),"i2":$("#i2").val()}, success:function (data) { $("#i3").val(data); } }) }) </script> </body> </html>
from django.shortcuts import render from django.http import JsonResponse def ajax_demo1(request): return render(request, "ajax_demo1.html") def ajax_add(request): i1 = int(request.GET.get("i1")) i2 = int(request.GET.get("i2")) ret = i1 + i2 return JsonResponse(ret, safe=False)views.py
urlpatterns = [ ... url(r‘^ajax_add/‘, views.ajax_add), url(r‘^ajax_demo1/‘, views.ajax_demo1), ... ]urls.py
如何設置csrf_token
方式一
通過獲取隱藏的input標簽中的csrfmiddlewaretoken值，放置在data中發送。
$.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "Q1mi", "password": 123456, "csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中 }, success: function (data) { console.log(data); } })
方式二
自己寫一個js文件獲取返回的cookie中的字符串 放置在請求頭中發送。
放在/static/
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‘); 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); } } });setupajax.js
用到AJAX的請求方式為post時候,提前導入一下文件即可
<script src="/static/setupajax.js"></script>
Django高級-AJAX應用