一 Ajax篇
1 ajax簡介（Asynchronous Javascript And XML）
異步,Js,XML,即使用Javascript語言與服務器進行異步交互,傳輸的數據為xml(可擴展標記語言),
2 兩個特點
2.1 異步交互
客服端發出一個請求,無需等待這個請求的響應,就可以發送第二個請求.
2.2 局部更新
不會造成網頁的覆蓋,僅僅是通過jquery的dom操作,使得頁面局部發生數據變化.
3 執行流程
4 基於Jquery 的ajax實現(加法計算器)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="result"><input type="button" class="cul" value="計算"> {% csrf_token %} <script> $('.cul').click(function () { let num1 = $('.num1').val(); let num2 = $('.num2').val(); console.log(num1, num2); $.ajax({ url:"/cul/", type:"post", data:{ n1:num1, n2:num2, csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), }, success:function (res) { console.log(res); $('.result').val(res); } }) }) </script> </body> </html>
4.1 標簽代碼
<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="result"><input type="button" class="cul" value="計算">
4.2 url.py
path('index/', views.index), #顯示主頁路由 path('cul/', views.cul), #加法計算路由
4.3 views.py
def index(request): return render(request,'index.html') def cul(request): n1=request.POST.get('n1') #獲取第一個數 n2=request.POST.get('n2') #獲取第二個數 ret=str(int(n1)+int(n2)) #加法運算 return HttpResponse(ret) #返回結果
4.4 ajax 代碼實現
{% csrf_token %} #為了獲取秘鑰
<script>
$('.cul').click(function () {
let num1 = $('.num1').val(); #獲取輸入框的第一個參數
let num2 = $('.num2').val(); #獲取輸入框的第二個參數
#ajax 的開始
$.ajax({
url:"/cul/", #ajax 請求的url
type:"post", #ajax 請求方式
data:{ #ajax 請求的數據
n1:num1,
n2:num2,
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), #獲取秘鑰
},
success:function (res) { #成功響應的回調函數,res為響應體內容
console.log(res);
$('.result').val(res);
}
})
})
</script>
5 ajax請求的參數
url : 請求的路徑 如 url:"/index/" type:請求的方式 如 type:"get", data:請求的數據, 如 data:{a:1,b:2...} contentType:請求體的編碼類型 ,僅用於post請求 processData:處理數據方式
success:成功回調函數,res響應體數據
6 ajax前后端交互推薦使用json格式的數據傳輸
py文件
json.dumps('字典') #把字典序列化為json字符串 json.loads('json字符串') #把json字符串反序列化為字典
html文件
JSON.stringify('obj') #把自定義對象轉化為json字符串 JSON.parse('json字符串') #把字符串轉換為自定義對象
JsonResponse :只需要后端使用JsonResponse傳遞json字符串,后端會自動反序列化賦值給res
res={"code":200,"data":None,"msg":None}
return JsonResponse(res)
二 文件上傳篇
1 請求頭
ContentType指的是請求體的編碼類型，常見的類型共有3種：
1 .1 application/x-www-form-urlencoded
最為常見的POST提交數據的方式,如果不設置enctype屬性,默認的POST提交數據的方式就是application/x-www-form-urlencoded,請求頭信息,如下
POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded; charset=utf-8 user=yuan&age=22
1.2 multipart/form-data
form表單提交文件必須將 enctype=multipart/form-data,請求信息示例
POST http://www.example.com HTTP/1.1 Content-Type:multipart/form-data; boundary=---- WebKitFormBoundaryrGKCBY7qhFd3TrwA #分割標識符,只要這個分割標識符一致,則說明是同一個文件 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="user" yuan ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: image/png PNG ... content of chrome.png ... ------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
1.3 application/json
form表單里面enctype=application/json,數據以json字符串方式提交,django不會解析json 字符串,需要自己反序列化
提交數據形式 '{"a":1,"b":2...}' django解析數據 import json json.loads(request.Body.decode())
2 form表單提交文件
2.1 模板部分
<form action="" method="post" enctype="multipart/form-data"> 用戶名 <input type="text" name="user"> 頭像 <input type="file" name="file"> <input type="submit"> </form>
2.2 視圖部分
def file(request): print(request.POST) print(request.FILES) file_obj = request.FILES.get('file') #get('后端傳入的name') 獲取到文件句柄 name=file_obj.name #獲取文件名 #讀取文件,寫入文件 with open(name,'wb')as f: for line in file_obj: f.write(line) return HttpResponse('上傳成功')
3 基於ajax的文件上傳
<h3>Ajax的文件上傳</h3> <form> {% csrf_token %} <input type="text" class="user"> <input type="file" class="file"> <input type="button" value="submit" class="ajax_btn2"> </form>
<script> $(".sub_btn").click(function () { let formdata=new FormData; //創建FormData對象,代表文件傳輸 formdata.append("user", $('.user').val()); formdata.append("file", $('.file')[0].files[0]); formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val(),) $.ajax({ url:'/file/', type: 'post', processData:false, //不讓指定數據處理方式 contentType:false, //不讓指定傳輸格式 data:formdata, //formdata對象自帶數據處理方式和傳輸格式 }) }) </script>
def put2(request): print(request.POST) print(request.FILES) file_obj=request.FILES.get("file") print(file_obj.name) name=file_obj.name with open(os.path.join("media","imgs",name),"wb") as f_w: for line in file_obj: f_w.write(line) return HttpResponse('上傳成功!')
三 補充篇---Ajax 使用Json 數據格式進行數據交互
1 contentType:"json", #規定傳輸格式為"json" 2 data:JSON.stringify({ #傳輸的數據轉換為json字符串數據 a:1, b:2 }),
<script> #默認的contType: urlencoded $(".ajax_btn").click(function () { $.ajax({ url:"/put1/", type:"post", data:{ a:1, b:2 }, success:function (res) { console.log(res) } }) }) #json字符串傳輸數據 $(".ajax_btn2").click(function () { $.ajax({ url:"/put1/", type:"post", contentType:"json", data:JSON.stringify({ a:1, b:2 }), success:function (res) { console.log(res) } }) }) </script>