一、什么是Ajax

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML,現(xiàn)在更多使用json數(shù)據(jù)）。

• 同步交互：客戶端發(fā)出一個(gè)請(qǐng)求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個(gè)請(qǐng)求；
• 異步交互：客戶端發(fā)出一個(gè)請(qǐng)求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個(gè)請(qǐng)求。

二、Ajax的特點(diǎn)

1、異步

客戶端發(fā)出一個(gè)請(qǐng)求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個(gè)請(qǐng)求

2、局部刷新

例如：

郵箱沒寫，會(huì)局部刷新郵箱區(qū)域，判斷郵箱

三、Ajax優(yōu)點(diǎn)

• AJAX使用 Javascript 技術(shù)向服務(wù)器發(fā)送異步請(qǐng)求
• AJAX無須刷新整個(gè)頁(yè)面

四、 基于jquery的Ajax使用

1、基本語法

// 在templates模板層使用 $.ajax({url:'/index/',type:'post',//data:往后臺(tái)提交的數(shù)據(jù)data:{'name':'lqz','age':18},//成功的時(shí)候回調(diào)這個(gè)函數(shù)success:function (data) {alert(data)} })

2、完整使用語法

<!-- 先導(dǎo)入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提交表單中的數(shù)據(jù)

<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">點(diǎn)我</button><script>$('.btn').click(function(){$.ajax({url:'add',type:'post',// 通過 .val() 獲取值data:{'add1':$('#add1').val(),'add2':$('#add2').val},success:function(data){// 將數(shù)據(jù)寫在val(data)中，可以賦值$('#sum').val(data)location.href='/index/'}})}) </script>

五、Ajax的執(zhí)行流程

六、基于ajax進(jìn)行文件上傳

1、請(qǐng)求頭ContentType

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

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

（2）multipart/form-data方式

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

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

?

（3）application/json方式

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

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個(gè)把具體的文件取出來formdata.append('myfile',$("#myfile")[0].files[0]);$.ajax({url:'/files_ajax/',type:'post',// 告訴jQuery不要去處理發(fā)送的數(shù)據(jù),(name=lqz&age=18)processData:false,// 指定往后臺(tái)傳數(shù)據(jù)的編碼格式(urlencoded,formdata,json)// 現(xiàn)在用formdata對(duì)象處理了,就不需要指定編碼格式了,不要編碼了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')# 這是個(gè)字典dic_files=request.FILESmyfile=dic_files.get('myfile')with open(myfile.name,'wb') as f:# 循環(huán)上傳過來的文件for line in myfile:# 往空文件中寫 f.write(line)return HttpResponse('ok')def files_ajax(request):# 提交文件從,request.FILES中取,提交的數(shù)據(jù),從request.POST中取name=request.POST.get('name')print(name)dic_files = request.FILESmyfile = dic_files.get('myfile')with open(myfile.name, 'wb') as f:# 循環(huán)上傳過來的文件for line in myfile:# 往空文件中寫 f.write(line)return HttpResponse('ok')

（3）路由層

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

注意點(diǎn)：

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

六、基于ajax提交json格式數(shù)據(jù)

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相當(dāng)于python中json.dumpus(post_data)，把數(shù)據(jù)裝換位json格式字符串//pos是個(gè)json格式字符串var pos=JSON.stringify(post_data);console.log(typeof pos);$.ajax({url:'/json/', // url這里為空的話，默認(rèn)向該頁(yè)面發(fā)出ajax請(qǐng)求 type:'post', // type值為空的話，默認(rèn)為get方法data:pos,contentType:'application/json',dataType:'json',success:function (data) {//如果data是json格式字符串,如何轉(zhuǎn)成對(duì)象(字典)?//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是個(gè)字典res=json.loads(request.body.decode('utf-8'))print(res)print(type(res))dic={'status':'100','msg':'登錄成功'}# return HttpResponse('ok')# 返回給前臺(tái)json格式# return HttpResponse(json.dumps(dic))return JsonResponse(dic)

3、路由層

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

總結(jié)：

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhangbingsheng/p/10663808.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。