ajax組件怎么在django中使用?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
十年專(zhuān)注成都網(wǎng)站制作,企業(yè)網(wǎng)站設(shè)計(jì),個(gè)人網(wǎng)站制作服務(wù),為大家分享網(wǎng)站制作知識(shí)、方案,網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專(zhuān)注于企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都石涼亭等多個(gè)方面,擁有豐富的網(wǎng)站運(yùn)維經(jīng)驗(yàn)。Ajax(Asynchronous Javascript And XML)翻譯成英文就是“異步Javascript和XML”。即用Javascript語(yǔ)言與服務(wù)器進(jìn)行異步交互,傳輸?shù)臄?shù)據(jù)為XML,(現(xiàn)在使用更多的是json數(shù)據(jù))。
向服務(wù)器發(fā)送請(qǐng)求的途徑
1.瀏覽器地址欄 http://www.baidu.com 默認(rèn)是get請(qǐng)求
2.form表單發(fā)送請(qǐng)求:
GET請(qǐng)求
POST請(qǐng)求
3.a標(biāo)簽 href屬性 默認(rèn)是get請(qǐng)求
4.ajax()
Ajax的特點(diǎn)
異步交互:客戶(hù)端發(fā)送一個(gè)請(qǐng)求后,無(wú)需等待服務(wù)器響應(yīng)結(jié)束,就可以發(fā)送第二個(gè)請(qǐng)求;
局部刷新:瀏覽器頁(yè)面局部刷新
局部刷新的意思就是當(dāng)咱們?cè)诓┛蛨@注冊(cè)一個(gè)新的博客的時(shí)候,當(dāng)咱們輸入用戶(hù)名后鼠標(biāo)移開(kāi)的時(shí)候,就發(fā)送了一個(gè)請(qǐng)求,去驗(yàn)證這個(gè)用戶(hù)是否存在,如果存在,則通知用戶(hù)該用戶(hù)名已經(jīng)被注冊(cè)了。
基于jquery實(shí)現(xiàn)的ajax請(qǐng)求
讓我們使用pycharm重新創(chuàng)建一個(gè)項(xiàng)目,項(xiàng)目名為Ajax_demo,應(yīng)用名為app01。
# url控制器 from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), ]
那么當(dāng)我們需要有對(duì)應(yīng)的視圖函數(shù) index和test_ajax:
# app01-->views.py from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request, 'index.html') def test_ajax(request): return HttpResponse('hello!world!')
在這里匹配了相應(yīng)的視圖然后返回了一個(gè)html頁(yè)面:
# index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <h4>功能1:發(fā)送ajax請(qǐng)求</h4> <p class="content"></p> //這里的內(nèi)容是空的 <button class="btn">ajax</button> <script> $('.btn').click(function(){ $.ajax({ url:'/test_ajax/', type:'get', success:function(data){ $('.content').html(data) } }) }) </script> </body> </html>
這句話(huà)的意思是,當(dāng)咱們點(diǎn)擊button按鈕的時(shí)候,觸發(fā)了點(diǎn)擊動(dòng)作,然后發(fā)送了一個(gè)ajax請(qǐng)求,讓我們先看看此時(shí)是什么樣子的:
當(dāng)我們點(diǎn)擊了按鈕的時(shí)候,就發(fā)送了一個(gè)ajax請(qǐng)求:
此時(shí)一個(gè)簡(jiǎn)單的ajax請(qǐng)求就發(fā)送完成了。
利用ajax實(shí)現(xiàn)計(jì)算器
首先咱們的index.html中進(jìn)行布局:
# index.html <h4>功能2:利用ajax實(shí)現(xiàn)的計(jì)算器</h4> <input type="text" class="num1">+<input type="text" class="num2">=<input type="text" id="sum"><button class="cal">計(jì)算</button> $('.cal').click(function(){ $.ajax({ url:'/cal/', type:'post', data:{ 'n1':$('.num1').val(), 'n2':$('.num2').val(), }, success:function(data){ console.log(data); $('#sum').val(data); } }) })
然后咱們拿到了n1和n2的值,通過(guò)請(qǐng)求url發(fā)送給相應(yīng)的視圖然后進(jìn)行數(shù)據(jù)處理,最后拿到結(jié)果再返回給這個(gè)ajax。
# views.py def cal(request): print(request.POST) n1 = int(request.POST.get('n1')) n2 = int(request.POST.get('n2')) sum = n1+n2 return HttpResponse(sum)
此時(shí)的url控制器需要新添加一條:
path('cal/', views.cal),
其次是配置文件settings中的這一行需要注釋掉:
# 'django.middleware.csrf.CsrfViewMiddleware',
此時(shí)再查看結(jié)果:
利用ajax實(shí)現(xiàn)登陸認(rèn)證
首先咱們要開(kāi)一個(gè)路由,當(dāng)用戶(hù)在瀏覽器輸入http://127.0.0.1/login_btn/的時(shí)候,就匹配導(dǎo)對(duì)應(yīng)的視圖,所以:
# url控制器 from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), path('cal/', views.cal), path('login/', views.login), path('login_btn/', views.login_btn), ] # login_btn函數(shù) def login_btn(request): return render(request, 'login_btn.html')
然后返回了這個(gè)html頁(yè)面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <h4>利用ajax實(shí)現(xiàn)登陸認(rèn)證</h4> <form action=""> 用戶(hù)名 <input type="text" class="user"> 密碼 <input type="password" class="pwd"> <input type="button" value="submit" class="login_btn"> <span class="error"></span> </form> <script> $('.login_btn').click(function(){ $.ajax({ url:'/login/', type:'post', data:{ 'user':$('.user').val(), 'pwd':$('.pwd').val(), }, success:function(data){ //此時(shí)需要進(jìn)行轉(zhuǎn)換 console.log(typeof(data)); var data = JSON.parse(data) console.log(typeof(data)); if (data.user){ location.href = 'http://www.baidu.com' }else{ $('.error').html(data.msg).css({'color':'red'}) } } }) }) </script> </body> </html>
最后ajax將請(qǐng)求提交到了/login/中,然后進(jìn)行匹配視圖,然后就開(kāi)始執(zhí)行對(duì)應(yīng)代碼:
def login(request): # print(request.POST) user = request.POST.get('user') pwd = request.POST.get('pwd') from .models import User user = User.objects.filter(user=user, pwd=pwd).first() ret = { 'user': None, 'msg': None } if user: ret['user'] = user.user else: ret['msg'] = 'username or password is wrong!' import json return HttpResponse(json.dumps(ret))
首先打開(kāi)瀏覽器,輸入錯(cuò)誤的用戶(hù)名和密碼:
然后開(kāi)始輸入正確的用戶(hù)名和密碼,就會(huì)直接跳轉(zhuǎn)到百度的首頁(yè)了。
利用form表單進(jìn)行文件上傳
# urls.py path('file_put/', views.file_put), # views.py # 文件的上傳 def file_put(request): if request.method == 'POST': print(request.POST) return render(request, 'file_put.html') # file_put.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上傳</title> </head> <body> <h4>基于form表單實(shí)現(xiàn)的文件上傳</h4> <form action="" method="post" enctype="multipart/form-data"> 用戶(hù)名 <input type="text" name="user"> 頭像 <input type="file" name="avatar"> <input type="submit"> </form> </body> </html>
此時(shí)咱們輸入完用戶(hù)名和選中完圖片后,點(diǎn)擊提交咱們查看下打印的信息。
那么是我們的圖片沒(méi)有上傳過(guò)來(lái)嗎?當(dāng)然不是的,是因?yàn)樯蟼鞯膱D片就不在這里面。讓我們?cè)趘iews.py中執(zhí)行這個(gè)代碼:
print(request.FILES)
看到的是這個(gè)樣子:
那么此時(shí)我們就可以確定,這個(gè)文件是上傳過(guò)來(lái)了,存放在request.FILES中,那么咱們使用request.FILES.get就可以把這個(gè)圖片對(duì)象拿到了。
# views.py def file_put(request): if request.method == 'POST': print(request.POST) # # print(request.body) print(request.FILES) # 圖片信息 # 將文件給取出來(lái) img_obj = request.FILES.get('avatar') with open(img_obj.name, 'wb') as f: for line in img_obj: f.write(line) return HttpResponse('ok!') return render(request, 'file_put.html')
那么此時(shí)直接上傳的話(huà),那么就會(huì)在當(dāng)前項(xiàng)目下展示這張照片。
利用ajax實(shí)現(xiàn)文件上傳
首先我們需要新開(kāi)一個(gè)url或者將之前的注釋掉:
# urls.py path('file_put/', views.file_put),
ajax提交文件的方式同樣使用form表單,但是不需要給input設(shè)置name屬性,只需要設(shè)置class或者id就可以了:
# file_put.html <form action="" method="post"> 用戶(hù)名 <input type="text" id="user"> 頭像 <input type="file" id="avatar" > <input type="button" class="btn" value="ajax"> </form>
那么咱們需要給btn設(shè)置點(diǎn)擊click動(dòng)作:
$('.btn').click(function(){ //涉及到文件上傳 需要?jiǎng)?chuàng)建formdata對(duì)象 var formdata = new FormData(); formdata.append('user',$('#user').val()); formdata.append('avatar',$('#avatar')[0].files[0]); $.ajax({ url:'', type:'post', contentType:false, // 交給FormData處理編碼 processData:false, //對(duì)數(shù)據(jù)是否進(jìn)行預(yù)處理 如果不做預(yù)處理的話(huà) 就不做任何編碼了 data:formdata, success:function(data){ console.log(data) } }) })
最后在試圖函數(shù)中進(jìn)行文件保存操作:
def file_put(request): if request.method == "POST": print("body", request.body) # 請(qǐng)求報(bào)文中的請(qǐng)求體 json print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數(shù)據(jù) print('FILES', request.FILES) file_obj=request.FILES.get("avatar") with open(file_obj.name,"wb") as f: for line in file_obj: f.write(line) return HttpResponse("OK") return render(request, "file_put.html") Content-Type
在咱們剛剛的form表單的文件上傳和ajax文件上傳的時(shí)候,都涉及到一個(gè)請(qǐng)求頭的東西,這個(gè)東西是什么呢?這個(gè)東西決定著服務(wù)器會(huì)按照哪種編碼格式給你解碼,當(dāng)你默認(rèn)不寫(xiě)的時(shí)候,此時(shí)的請(qǐng)求頭是:application/x-www-form-urlencoded,當(dāng)你想發(fā)送文件類(lèi)的東西,此時(shí)的請(qǐng)求頭應(yīng)該是:form-data......
當(dāng)服務(wù)器收到客戶(hù)端發(fā)送過(guò)來(lái)的請(qǐng)求時(shí),首先就會(huì)去查看請(qǐng)求頭,判斷你的請(qǐng)求頭是什么,然后進(jìn)行解碼。
讓我們分別看下這幾個(gè)請(qǐng)求頭:
x-www-form-urlencoded
application/x-www-form-urlencoded:表單數(shù)據(jù)編碼為鍵值對(duì),&分隔,可以當(dāng)成咱們的GET請(qǐng)求中?后面的數(shù)據(jù),讓我們發(fā)送一個(gè)庶幾乎看看:
<form action="" method="post"> 用戶(hù)名 <input type="text" name="user"> 密碼 <input type="password" name="pwd"> <input type="submit" value="submit"> </form>
那么我們需要一個(gè)視圖函數(shù)還進(jìn)行處理:
def file_put(request): if request.method == "POST": print("body", request.body) # 請(qǐng)求報(bào)文中的請(qǐng)求體 json print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數(shù)據(jù) return HttpResponse("OK") return render(request, "file_put.html")
當(dāng)我們?cè)跒g覽器輸入admin和123的時(shí)候,讓我們來(lái)看下打印的結(jié)果是什么:
我們剛剛說(shuō)過(guò),當(dāng)我們請(qǐng)求頭什么都不寫(xiě)的話(huà),那么就是默認(rèn)的x-www-form-urlencoded,當(dāng)請(qǐng)求頭是這種的話(huà),此時(shí)我們打印request.POST是有值的,也就這一種請(qǐng)求方式request.POST才有值。
讓我們現(xiàn)在發(fā)送一個(gè)json的數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <form action="" method="post"> 用戶(hù)名 <input type="text" class="user"> 密碼 <input type="password" class="pwd"> <input type="button" value="submit" class="btn"> </form> <script> $('.btn').click(function(){ $.ajax({ url:'', type:'post', data:JSON.stringify({ a:1, b:2 }), success:function(data){ console.log(data) } }) }) </script> </body> </html>
視圖函數(shù)中是這樣的:
def send_json(request): if request.method == 'POST': print('body', request.body) print('post', request.POST) print('files', request.FILES) return HttpResponse('ok!') return render(request, 'send_json.html')
當(dāng)我們發(fā)送數(shù)據(jù)的時(shí)候,通過(guò)解碼收到的就是這樣的數(shù)據(jù):
就和我們剛剛說(shuō)的一樣,當(dāng)請(qǐng)求頭是x-www-form-urlencoded
的時(shí)候,request.POST才會(huì)有數(shù)據(jù),其他的就沒(méi)有。
看完上述內(nèi)容,你們掌握ajax組件怎么在django中使用的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
標(biāo)題名稱(chēng):ajax組件怎么在django中使用-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://muchs.cn/article12/eicdc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、網(wǎng)站改版、軟件開(kāi)發(fā)、建站公司、App設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容