Django - AJAX
一. JSON
什么是json?
- json指的是JavaScript對象表示法(JavaScript Object Notation)
- json是輕量級的文本數(shù)據(jù)交換格式
- 獨(dú)立于語言, 支持不同的編程語言
- 具有自我描述性, 跟易理解
合格的json對象:
["one", "two", "three"] { "one": 1, "two": 2, "three": 3 } {"names": ["張三", "李四"] } [ { "name": "張三"}, {"name": "李四"} ]不合格的json對象:
{ name: "張三", 'age': 32 } // 屬性名必須使用雙引號 [32, 64, 128, 0xFFF] // 不能使用十六進(jìn)制值 { "name": "張三", "age": undefined } // 不能使用undefined { "name": "張三","birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),"getName": function() {return this.name;} // 不能使用函數(shù)和日期對象 }python?
數(shù)據(jù)類型: 字符串, 數(shù)字, 布爾值, 列表, 字典, Null
序列化: Python數(shù)據(jù)類型 --> json 字符串
? ?json.dumps(Python數(shù)據(jù)類型)
反序列化: json字符串 -->Python數(shù)據(jù)類型
json.loads(json字符串) json.load(json字符串, f)
前端
數(shù)據(jù)類型: 字符串, 數(shù)字, 布爾值, 數(shù)組, 隊象, null
序列化: JSON.stringgify(Js的數(shù)據(jù)類型)
反序列化: JSON.parse(json的字符串)
JsonResponse
from django.http import JsonResponse
JsonResponse(字典)
jsonResponse([], safe=False)
二. AJAX簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML）。
AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。（這一特點(diǎn)給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。
- 同步交互：客戶端發(fā)出一個請求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個請求；
- 異步交互：客戶端發(fā)出一個請求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個請求。
示例
頁面輸入兩個整數(shù)，通過AJAX傳輸?shù)胶蠖擞嬎愠鼋Y(jié)果并返回。
<!DOCTYPE html> <html lang="en"> <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局部刷新實(shí)例</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> HTML 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 + i2return JsonResponse(ret, safe=False) Views.py urlpatterns = [...url(r'^ajax_add/', views.ajax_add),url(r'^ajax_demo1/', views.ajax_demo1),... ] urls.py?優(yōu)點(diǎn)：
- AJAX使用JavaScript技術(shù)向服務(wù)器發(fā)送異步請求；
- AJAX請求無須刷新整個頁面；
- 因?yàn)榉?wù)器響應(yīng)內(nèi)容不再是整個頁面，而是頁面中的部分內(nèi)容，所以AJAX性能高；
參數(shù):
$.ajax({url: '/ajax_test/', # 請求的地址type: 'post', # 請求的方式data: { # 請求的數(shù)據(jù)name: 'alex',age: '73',hobby: JSON.stringify(['吃燒餅', '畫大餅', '賣燒餅'])},success: function (res) { # 正常響應(yīng)的回調(diào)函數(shù)$('[name="ii3"]').val(res)},error:function (res) { # 錯誤響應(yīng)的回調(diào)函數(shù) console.log(res)}三. jQuery實(shí)現(xiàn)的AJAX
最基本的JQuery發(fā)送請求示例:
<!DOCTYPE html> <html lang="zh-CN"> <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 test</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <button id="ajaxTest">AJAX 測試</button> <script>$("#ajaxTest").click(function () {$.ajax({url: "/ajax_test/",type: "POST",data: {username: "Q1mi", password: 123456},success: function (data) {alert(data)}})}) </script> </body> </html> jQuery def ajax_test(request):user_name = request.POST.get("username")password = request.POST.get("password")print(user_name, password)return HttpResponse("OK") Views.pydata參數(shù)中的鍵值對，如果值值不為字符串，需要將其轉(zhuǎn)換成字符串類型。
$("#b1").on("click", function () {$.ajax({url:"/ajax_add/",type:"GET",data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},success:function (data) {$("#i3").val(data);}})})四. JS實(shí)現(xiàn)AJAX
var b2 = document.getElementById("b2");b2.onclick = function () {// 原生JSvar xmlHttp = new XMLHttpRequest();xmlHttp.open("POST", "/ajax_test/", true);xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlHttp.send("username=q1mi&password=123456");xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {alert(xmlHttp.responseText);}};};五. AJAX請求如何設(shè)置csrf_token
方式一.?
通過獲取隱藏的input標(biāo)簽中的csrfmiddlewaretoken值，放置在data中發(fā)送。
頁面中使用{% csrf_token %}, 給POSt提交數(shù)據(jù)中添加 csrfmiddlewaretoken 的鍵值對
#urls: urlpatterns = [url(r'^admin/', admin.site.urls),url(r'^index/', views.index),url(r'^calc/', views.calc),#ajax: $('#b1').click(function () {$.ajax({url: '/calc/',type: 'post',data: {'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),i1: $('[name="i1"]').val(),i2: $('[name="i2"]').val()},success: function (res) {$('[name="i3"]').val(res)}})#viewsdef calc(request):i1 = request.POST.get('i1', '')i2 = request.POST.get('i2', '')time.sleep(3)i3 = int(i1) + int(i2) if i1 and i2 else ''return HttpResponse(i3)}); 示例 $.ajax({url: "/cookie_ajax/",type: "POST",data: {"username": "Q1mi","password": 123456,"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中},success: function (data) {console.log(data);} })方式二
通過獲取返回cookie中的字符串 放置在請求頭中發(fā)送
注意：需要引入一個jquery.cookie.js插件。
$.ajax({url: "/cookie_ajax/",type: "POST",headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrftoken，并設(shè)置到請求頭中data: {"username": "Q1mi", "password": 123456},success: function (data) {console.log(data);} }) View Code或者用自己寫一個getCookie方法:
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'); View Code還可以使用$.ajaxSetup()方法為ajax請求統(tǒng)一設(shè)置。
function csrfSafeMethod(method) {// these HTTP methods do not require CSRF protectionreturn (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); }$.ajaxSetup({beforeSend: function (xhr, settings) {if (!csrfSafeMethod(settings.type) && !this.crossDomain) {xhr.setRequestHeader("X-CSRFToken", csrftoken);}} }); View Code注意:
如果使用從cookie中取csrftoken的方式，需要確保cookie存在csrftoken值。
如果你的視圖渲染的HTML文件中沒有包含 {% csrf_token %}，Django可能不會設(shè)置CSRFtoken的cookie。
這個時候需要使用ensure_csrf_cookie()裝飾器強(qiáng)制設(shè)置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookie def login(request):pass六. AJAX上傳文件
def upload(request):if request.is_ajax():file_obj = request.FILES.get('f1')with open(file_obj.name, 'wb') as f:for i in file_obj.chunks():f.write(i)return HttpResponse('上傳成功')return render(request, 'upload.html') View Codehtml?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="" enctype="multipart/form-data"></form> <input type="file" name="f1"> <button id="b1">上傳</button><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script>$('#b1').click(function () {var form_obj = new FormData();form_obj.append('f1',$('[name="f1"]')[0].files[0])$.ajax({url:'/upload/',type:'post',processData:false,contentType:false,data:form_obj,success:function (res) {alert(res)}})})</script></body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/Ryan-Yuan/p/11573523.html
總結(jié)
以上是生活随笔為你收集整理的Django - AJAX的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL 练习 创建表格2
- 下一篇： 12 计算机组成原理第七章 输入/输出