Ajax簡介
向服務器發送請求的4種方式
1、瀏覽器地址欄，默認get請求
2、form表單：
get請求
post請求
3、a標簽，默認get請求4、Ajax
特點：
1 異步請求
2 局部刷新
方式：get
post
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML,現在更多使用json數據）。
- 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
- 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。
AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
場景：
優點：
- AJAX使用Javascript技術向服務器發送異步請求
- AJAX無須刷新整個頁面，局部刷新
基於jquery的Ajax實現
Ajax基本語法和參數
<button class="send_Ajax">send_Ajax</button> <script> $(".send_Ajax").click(function(){ $.ajax({ url:"/handle_Ajax/", //請求URL，注意寫法，寫在兩個反斜杠之間，如果不寫，就是默認當前的IP地址和端口，和action一樣 type:"POST", //請求方式 data:{username:"Yuan",password:123}, //請求數據
contentType： //格式 success:function(data){ //回調函數，data接受服務器返回的數據，和上面是兩回事 console.log(data) }, error: function (jqXHR, textStatus, err) { console.log(arguments); }, complete: function (jqXHR, textStatus) { console.log(textStatus); }, statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); }, '400': function (jqXHR, textStatus, err) { console.log(arguments); } } }) }) </script>
一個不帶數據的Ajax請求流程圖
注意：ajax的事件不能使用submit按鈕
帶數據Ajax請求
效果圖
html模板文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <h3>這是一個Ajax測試</h3> <input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="n3"><button class="btn">計算</button> </body> <script> $(".btn").click(function(){ $.ajax({ url:"/ajax_text/", type: 'post', data:{ 'n1':$("#n1").val(), 'n2':$('#n2').val() }, success:function (data) { $('#n3').val(data) } }) }) </script> </html>
視圖函數文件
from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request, 'index.html') def ajax_text(request): n1=int(request.POST.get('n1')) n2=int(request.POST.get('n2')) ret=n1+n2 print(ret) # 需要注釋掉setting里面中間件的東西，雖然不明白，但是以后會講 return HttpResponse(ret)
運行前，需要注釋掉setting里面中間件的東西，雖然不明白，但是以后會講
如果請求方法換成使用get方法 ，第一次失敗了，why？
原因是，忘記在視圖函數中，更改POST為GET,必須要視圖函數中的方法也改為GET，對應上，才能接收到
基於Ajax的登錄驗證
實現用戶輸入用戶名和密碼之后，通過Ajax提交給服務端，服務端處理后返回響應信息，如果正確，跳轉到其他頁面，如果不正確，在輸入框后顯示“用戶名或者密碼錯誤”。
需要用到 json 來傳遞字符串。
效果圖
view視圖代碼
from django.shortcuts import render, HttpResponse from app01.models import * import json # 登陸首頁 def login(request): return render(request, 'login.html') # 登錄驗證 def verify(request): # 獲取瀏覽器輸入的賬號和密碼 print(1) user = request.GET.get('user') pwd = request.GET.get('pwd') # 查詢數據庫是不是存在該賬號和對應的密碼 user_ret = User.objects.filter(user=user, pwd=pwd) # 定義響應信息 ret = {'user': None, ',msg': None} if user_ret: ret['user'] = user else: ret['msg'] = '用戶名或者密碼錯誤！' ret = json.dumps(ret) print(ret) return HttpResponse(ret) # 因為HttpResponse 必須用字符串，所以要用JSON
login.html模板文件代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> </style> </head> <body> <h3>歡迎來到登錄頁面</h3> <div> <form action=""> <input type="text" id="user"> <input type="text" id="pwd"> <input type="button" class="btn" value="登陸"> </form> <span class="error" style="color: red"></span> </div> </body> <script> $(".btn").click(function(){ $.ajax({ url:"/verify/", type: 'get', data:{ 'user':$("#user").val(), 'pwd':$('#pwd').val() }, success:function (data) { {#前端反序列化#} var ret=JSON.parse(data); if(ret.user){ {#如果成功跳轉到頁面#} location.href='https://www.cnblogs.com/yxiaodao/' } {#如果不正確，提示信息#} else{ $('.error').text(ret.msg) } } }) }) </script> </html>
文件上傳
文件上傳的兩種方式
基於form表單的文件上傳
基於Ajax的文件上傳
請求頭ContentType
ContentType指的是請求體的編碼類型，常見的類型共有3種：
1、application/x-www-form-urlencoded
這應該是最常見的 POST 提交數據的方式了。瀏覽器的原生 <form> 表單，如果不設置 enctype 屬性，那么最終就會以 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
2、multipart/form-data
這又是一個常見的 POST 數據提交的方式。我們使用表單上傳文件時，必須讓 <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--
這個例子稍微復雜點。首先生成了一個 boundary 用於分割不同的字段，為了避免與正文內容重復，boundary 很長很復雜。然后 Content-Type 里指明了數據是以 multipart/form-data 來編碼，本次請求的 boundary 是什么內容。消息主體里按照字段個數又分為多個結構類似的部分，每部分都是以 --boundary 開始，緊接着是內容描述信息，然后是回車，最后是字段具體內容（文本或二進制）。如果傳輸的是文件，還要包含文件名和文件類型信息。消息主體最后以 --boundary-- 標示結束。關於 multipart/form-data 的詳細定義，請前往 rfc1867 查看。
這種方式一般用來上傳文件，各大服務端語言對它也有着良好的支持。
上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支持的，而且現階段標准中原生 <form> 表單也只支持這兩種方式（通過 <form> 元素的 enctype 屬性指定，默認為 application/x-www-form-urlencoded。其實 enctype 還支持 text/plain，不過用得非常少）。
隨着越來越多的 Web 站點，尤其是 WebApp，全部使用 Ajax 進行數據交互之后，我們完全可以定義新的數據提交方式，給開發帶來更多便利。
3、application/json
application/json 這個 Content-Type 作為響應頭大家肯定不陌生。實際上，現在越來越多的人把它作為請求頭，用來告訴服務端消息主體是序列化后的 JSON 字符串。由於 JSON 規范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會遇上什么麻煩。
JSON 格式支持比鍵值對復雜得多的結構化數據，這一點也很有用。
基於form表單的文件上傳
視圖函數文件
def file_put(request): # 點擊之后form表單是post請求，加一個判斷 if request.method=='POST': print(request.POST) print(request.FILES) user=request.POST.get('user') # # 文件對象的接受方式,沒有放在post中，而是放在了FILES中 pic=request.FILES.get('pic') print(type(pic)) # # 接收文件保存在本地，name是文件的一個屬性，可以直接使用 with open(pic.name,'wb') as f: for line in pic: f.write(line) return HttpResponse('OK') return render(request,'file_put.html')
模板文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>基於form表單的文件上傳</h3> {# 上傳文件一定要用multipart/form-data#} <form action="" method="post" enctype="multipart/form-data"> 用戶名 <input type="text" name="user"> 頭像 <input type="file" name="pic"> {# <input type="submit">#} <button type="submit">提交</button> </form> </body> </html>
Ajax發送json數據
上面的例子演示過服務端發送json數據到瀏覽器端
下面是瀏覽器端發送json到服務端
發送的json數據需要在request.body中提取
POST只能接受urlencodeed的數據
並且，無論發的是什么格式，我們都可以在body中提取到
基於Ajax的文件上傳
視圖文件代碼和上面用form表單一樣
網頁效果圖片
服務端接收到文件
模板文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <h3>基於form表單的文件上傳</h3> 上傳文件一定要用multipart/form-data <form action="" method="post" enctype="multipart/form-data"> 用戶名 <input type="text" name="user"> 頭像 <input type="file" name="pic"> <input type="submit"> {# <button type="submit">提交</button>#} </form> <hr> <h3>基於AJAX文件上傳</h3> <form action="" method="post"> 用戶名 <input type="text" id="user"> 頭像 <input type="file" id="pic"> <input type="button" CLASS="ajbtn" value="AJAX提交"> </form> </body> <script> $('.ajbtn').click(function () { {#創建FormData對象#} console.log(123); var formdata=new FormData(); formdata.append('user',$('#user').val()); {#取文件格式的固定方法#} formdata.append('pic',$('#pic')[0].files[0]); $.ajax({ url:'', type:'post', contentType:false, //數據不做編碼 processData:false, //數據不做預處理 data:formdata, success:function (data) { console.log(data) } }) }) </script> </html>
咬注意的重點就是，需要定義一個新的FormData對象，然后發送FormData 需要，定義數據不做預處理和編碼