12.Django與ajax

標籤：color   for   encode   func   瀏覽器   ons   process   服務   內容類型   

Django與ajax

01.AJAX簡介：
　　AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。

　　　　*同步互動：用戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求
　　　　*非同步互動：用戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求
　　　　*AJAX除了非同步特點外，還有一個就是：瀏覽器頁面局部重新整理

　　優點：
　　　　AJAX使用Javascript技術向伺服器發送非同步請求
　　　　AJAX無須重新整理整個頁面

02.ajax發送json資料

 1 //發送json資料 2 $(‘.btn‘).click(function () { 3  4 $.ajax({ 5 url:"", 6 type:"post", 7 contentType:"application/json",//預設的contentType都為urlencoded 8 data:JSON.stringify({//相當於python中json.dumps 9 a:1,10 b:211 }),12 success:function (data) {13 14 }15 })16 })

 

03.ajax上傳檔案

 1 <form> 2 使用者名稱 <input type="text" id="user"> 3 頭像 <input type="file" id="avatar"> 4 <input type="button" id="ajax-submit" value="ajax-submit"> 5 </form> 6  7 <script> 8 $("#ajax-submit").click(function(){ 9 //擷取檔案固定格式10 var formdata=new FormData();11 formdata.append("user",$("#user").val());12 formdata.append("avatar_img",$("#avatar")[0].files[0]);//JS取得檔案先轉換為dom對象，再通過.files[0]擷取13 $.ajax({14 15 url:"",16 type:"post",17 data:formdata,18 //上傳檔案必寫這兩行！！！19 processData: false , // 不處理資料20 contentType: false, // 不設定內容類型21 22 success:function(data){23 console.log(data)24 }25 })26 })27 </script>

 

12.Django與ajax