71、django之Ajax續
接上篇隨筆。繼續介紹ajax的使用。
上篇友情連接：http://www.cnblogs.com/liluning/p/7831169.html
本篇導航：
- Ajax響應參數
- csrf 跨站請求偽造
- jQuery.serialize()
- 上傳文件
一、Ajax響應參數
上篇最後介紹了ajax的請求參數現在補充一個響應參數
dataType： 預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析後，傳遞給回調函數。 默認不需要顯性指定這個屬性， ajax會根據服務器返回的content Type來進行轉換； 比如我們的服務器響應的content Type為json格式，這時ajax 方法就會對響應的內容進行一個json格式的轉換，if轉換成功，我們在success的回調函數裏就會得到一個json格式的對 象；轉換失敗就會觸發error這個回調函數。如果我們明確地指定目標類型，就可以使用 data Type。dataType的可用 值：html｜xml｜json｜text｜script
簡單說就是告訴服務器需要返回什麽數據類型
二、csrf 跨站請求偽造
我們之前用form表單POST提交時如果沒有｛% csrf_token %｝客戶端收不到數據會報錯同樣用ajax POST提交數據也有同樣的錯誤那麽準麽解決呢？
1、方法一
$.ajaxSetup({ data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ }, }); $.ajax({ ... })
缺點：當js與html文件分離時，{{ csrf_token }} 無法被渲染失去作用，用方法一必須將js和html寫在一起
2、方法二
{% csrf_token %}
$.ajax({
url:
缺點：html body標簽中必須存在{% csrf_token %}
3、方法三
//<script src="{% static ‘js/jquery.cookie.js‘ %}"></script> 需要下載對應文件 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> $.ajax({ headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, })
缺點：基本通用哈哈哈
三、jQuery.serialize()
serialize()函數用於序列化一組表單元素，將表單內容編碼為用於提交的字符串。serialize()函數常用於將表單內容序列化，以便用於AJAX提交。該函數主要根據用於提交的有效表單控件的name和value，將它們拼接為一個可直接用於表單提交的文本字符串，該字符串已經過標準的URL編碼處理(字符集編碼為UTF-8)。該函數不會序列化不需要提交的表單控件，這和常規的表單提交行為是一致的。例如：不在<form>標簽內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。
簡單總結：就是說我們如果有很多input標簽內容需要提交總不會全部寫在data中羅列出來吧，這就用到serialize()函數了可以幫我們一次性提交數據到客戶端。
例如：
<form name="myForm" action="http://www.365mini.com" method="post"> <input name="uid" type="hidden" value="1" /> <input name="username" type="text" value="張三" /> <input name="password" type="text" value="123456" /> <select name="grade" id="grade"> <option value="1">一年級</option> <option value="2">二年級</option> <option value="3" selected="selected">三年級</option> <option value="4">四年級</option> <option value="5">五年級</option> <option value="6">六年級</option> </select> <input name="sex" type="radio" checked="checked" value="1" />男 <input name="sex" type="radio" value="0" />女 <input name="hobby" type="checkbox" checked="checked" value="1" />遊泳 <input name="hobby" type="checkbox" checked="checked" value="2" />跑步 <input name="hobby" type="checkbox" value="3" />羽毛球 <input name="btn" id="btn" type="button" value="點擊" /> </form>提交數據
對<form>元素進行序列化可以直接序列化其內部的所有表單元素。
序列化所有：$("form").serialize()
uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
部分序列化：$(":text, select, :checkbox").serialize()
username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
view視圖函數如何取值呢？和以前的POST請求相同
request.POST.get("name") //input中的name屬性
四、上傳文件
1、普通上傳文件
1）template
<form action="/upload/" method="post" enctype="multipart/form-data"> {% csrf_token %} <p>用戶名<input type="text" name="user"></p> <p>頭像<input type="file" name="avatar"></p> <input type="submit"> </form>
enctype屬性不可缺少
2）view
def upload(request): if request.method=="POST": print("POST", request.POST) print("FILES",request.FILES) # FILES <MultiValueDict: {}> file_obj=request.FILES.get("avatar") print(file_obj.name,"-----") with open(file_obj.name,"wb") as f: for i in file_obj: f.write(i) return HttpResponse("成功") return render(request,"upload.html")
這是將上傳的文件寫入到本地file_obj的name方法可以取到文件名稱
3、Ajax(FormData)
XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.
1）template
<body> <form action="" id="s1"> <p>姓名<input type="text"></p> <p>密碼<input type="password"></p> <p>頭像<input type="file" id="upload_avatar"></p> </form> <p><button class="Ajax_send">提交</button><span class="login_error"></span></p> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script> function foo() { $(".login_error").html("") } $(".Ajax_send").click(function () { var formData=new FormData(); formData.append("username",$(":text").val()); formData.append("password",$(":password").val()); formData.append("avatar",$("#upload_avatar")[0].files[0]); $.ajax({ url:"/get_ajax/", type:"POST", headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, data:formData, contentType:false, processData:false, success:function (data) { var data=JSON.parse(data); if(!data["flag"]){ $(".login_error").html("用戶名或者密碼錯誤") setTimeout(foo,3000) } } }) }) </script> </body>View Code
2）view
def get_ajax(request): username=request.POST.get("username") password=request.POST.get("password") print("FIFLE",request.FILES) print("POST",request.POST) response={"flag":False} if username=="bjd" and password=="123": response["flag"]=True import json return HttpResponse(json.dumps(response))
71、django之Ajax續