一、什么是Ajax

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML,現在更多使用json數據）。

• 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
• 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

二、Ajax的特點

1、異步

客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求

2、局部刷新

例如：

郵箱沒寫，會局部刷新郵箱區域，判斷郵箱

三、Ajax優點

• AJAX使用 Javascript 技術向服務器發送異步請求
• AJAX無須刷新整個頁面

四、 基于jquery的Ajax使用

1、基本語法

// 在templates模板層使用 $.ajax({url:'/index/',type:'post',//data:往后臺提交的數據data:{'name':'lqz','age':18},//成功的時候回調這個函數success:function (data) {alert(data)} })

2、完整使用語法

<!-- 先導入jQuery --> <script src="/static/jquery-3.3.1.js"> </script> <button class="send_Ajax">send_Ajax</button> <script>$(".send_Ajax").click(function(){$.ajax({url:"/handle_Ajax/",type:"POST",data:{username:"Yuan",password:123},success:function(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>

3、利用ajax提交表單中的數據

<p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p> <button class="btn">點我</button><script>$('.btn').click(function(){$.ajax({url:'add',type:'post',// 通過 .val() 獲取值data:{'add1':$('#add1').val(),'add2':$('#add2').val},success:function(data){// 將數據寫在val(data)中，可以賦值$('#sum').val(data)location.href='/index/'}})}) </script>

五、Ajax的執行流程

六、基于ajax進行文件上傳

1、請求頭ContentType

（1）application/x-www-form-urlencoded方式

這是最常見的 POST 提交數據的方式了。瀏覽器的原生 <form> 表單，如果不設置?enctype?屬性，那么最終就會以 application/x-www-form-urlencoded 方式提交數據。

（2）multipart/form-data方式

這又是一個常見的 POST 數據提交的方式。我們使用表單上傳文件時，必須讓 <form> 表單的?enctype?等于 multipart/form-data

上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支持的，而且現階段標準中原生 <form> 表單也只支持這兩種方式（通過 <form> 元素的 enctype 屬性指定，
默認為 application/x-www-form-urlencoded。其實 enctype 還支持 text/plain，不過用得非常少）。

?

（3）application/json方式

現在越來越多的人把它作為請求頭，用來告訴服務端消息主體是序列化后的 JSON 字符串。由于 JSON 規范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會遇上什么麻煩。

2、基于Form表單上傳文件

（1）模板層

<!-- 必須指定 enctype="multipart/form-data" --> <form action="/files/" method="post" enctype="multipart/form-data"><p>用戶名:<input type="text" name="name" id="name"></p><!-- 必須指定type="file" --><p><input type="file" name="myfile" id="myfile"></p><input type="submit" value="提交"> </form> <button id="btn">ajax提交文件</button><script>$("#btn").click(function () {// 上傳文件,必須用FormDatavar formdata=new FormData();formdata.append('name',$("#name").val());// 取出文件$("#myfile")[0].files拿到的是文件列表,取第0個把具體的文件取出來formdata.append('myfile',$("#myfile")[0].files[0]);$.ajax({url:'/files_ajax/',type:'post',// 告訴jQuery不要去處理發送的數據,(name=lqz&age=18)processData:false,// 指定往后臺傳數據的編碼格式(urlencoded,formdata,json)// 現在用formdata對象處理了,就不需要指定編碼格式了,不要編碼了contentType:false,data:formdata,success:function (data) {alert(data)}})}) </script>

（2）視圖層

def add_file(request):if request.method=='GET':return render(request,'add_files.html')# 這是個字典dic_files=request.FILESmyfile=dic_files.get('myfile')with open(myfile.name,'wb') as f:# 循環上傳過來的文件for line in myfile:# 往空文件中寫 f.write(line)return HttpResponse('ok')def files_ajax(request):# 提交文件從,request.FILES中取,提交的數據,從request.POST中取name=request.POST.get('name')print(name)dic_files = request.FILESmyfile = dic_files.get('myfile')with open(myfile.name, 'wb') as f:# 循環上傳過來的文件for line in myfile:# 往空文件中寫 f.write(line)return HttpResponse('ok')

（3）路由層

url(r'^files/$', views.add_file), url(r'^files_ajax/', views.files_ajax),

注意點：

1、基于form表單上傳文件，需要指定編碼格式，那么ajax一樣也是，首先我們先創建一個FormData的一個對象 2、我們通過append方法，給對象傳值append(value1,value2),相當于value1=value2 3、processData:false, # 告訴jQuery不要去處理發送的數據contentType:false, # 告訴jQuery不要去設置Content-Type請求頭 4、processData的值只能是布爾值，因為這時的data的值，是一個對象，所以不需要進行處理了

六、基于ajax提交json格式數據

1、模板層

<form ><p>用戶名:<input type="text" name="name" id="name"></p><p>密碼:<input type="password" name="pwd" id="pwd"></p><input type="submit" value="提交"> </form><button id="btn">ajax提交json格式</button> </body><script>$('#btn').click(function () {var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};console.log(typeof post_data);//JSON.stringify相當于python中json.dumpus(post_data)，把數據裝換位json格式字符串//pos是個json格式字符串var pos=JSON.stringify(post_data);console.log(typeof pos);$.ajax({url:'/json/', // url這里為空的話，默認向該頁面發出ajax請求 type:'post', // type值為空的話，默認為get方法data:pos,contentType:'application/json',dataType:'json',success:function (data) {//如果data是json格式字符串,如何轉成對象(字典)?//data=JSON.parse(data)console.log(typeof data)console.log(data.status)/*console.log(data)var ret=JSON.parse(data)console.log(typeof ret)console.log(ret.status)*///alert(data)}})}) </script>

2、視圖層

def add_json(request):if request.method=='GET':return render(request,'json.html')print(request.POST)print(request.GET)print(request.body)import json# res是個字典res=json.loads(request.body.decode('utf-8'))print(res)print(type(res))dic={'status':'100','msg':'登錄成功'}# return HttpResponse('ok')# 返回給前臺json格式# return HttpResponse(json.dumps(dic))return JsonResponse(dic)

3、路由層

url(r'^json/', views.add_json),

總結：

1、如果是文件，就先創建一個FormData對象,以key，value的位置，參傳數進去在ajax方法里，data對應的值就是這個FormData對象，所以在processData的值應該為false，contentType的值也為false(讓jquery不設置請求頭)注意：它文件在后面中request.FILES里面，如果有其他input框所對應的value，它的值在POST中取 2、如果不是上傳文件，就是form表單的里input的話，就直接傳了，contentType默認為urlencoded編碼方法 3、json格式數據，首先是把對象給造出來，并且把數據放里面，然后轉換成json格式字符串，這里contentType必須為'application/json'，
這樣它的的數據在request.body里，是二進制格式 4、在前端接收到后臺json格式數據，可以在ajax那里寫dataType:'json'，它會自動轉換成對象

?

轉載于:https://www.cnblogs.com/zhangbingsheng/p/10663808.html

總結

以上是生活随笔為你收集整理的Django框架（十二）-- Djang与Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。