jquery框架中提供了$.ajax、$.get、$.post方法，用于進行異步交互，由于Django中默認使用CSRF約束，推薦使用$.get
示例：實現省市區的選擇
最終實現效果如圖：
將jquery文件拷貝到static/js/目錄下
打開booktest/views.py文件，定義視圖area1，用于顯示下拉列表
#提供顯示下拉列表的控件，供用戶操作
def area1(request):
return render(request,'booktest/area1.html')
打開booktest/urls.py文件，配置url
url('^area1/$',views.area1),
在templates/booktest/目錄下創建area1.html
$(function () {
$.get('/sheng/',function (data) {//{slist:[]}
var slist=data.slist;//[{},{},{}...]
var sheng=$('#sheng');
$.each(slist,function (i,n) {
//n==>{id:,title:}
sheng.append(''+n.title+'')
});
});
$('#sheng').change(function () {
var sid=$(this).val();
if(sid!='0'){
$.get('/shi/',{'sid':sid},function (data) {
var slist=data.slist;
var shi=$('#shi').empty().append('請選擇');
$('#qu').empty().append('請選擇');
$.each(slist,function (i,n) {
shi.append(''+n.title+'');
});
});
}
});
$('#shi').change(function () {
var sid=$(this).val();
if(sid!='0'){
$.get('/shi/',{'sid':sid},function (data) {
var slist=data.slist;
var shi=$('#qu').empty().append('請選擇');
$.each(slist,function (i,n) {
shi.append(''+n.title+'');
});
});
}
});
});
請選擇
請選擇
請選擇
運行服務器，在瀏覽器中輸入如下網址
瀏覽效果如下圖
打開booktest/views.py文件，定義視圖sheng，用于獲取省信息
url('^sheng/$',views.sheng),
from django.http import JsonResponse
def sheng(request):
slist=AreaInfo.objects.filter(aParent__isnull=True)
'''
[{id:,title:},{},{}]
'''
slist2=[]
for s in slist:
slist2.append({'id':s.id,'title':s.atitle})
return JsonResponse({'slist':slist2})
打開booktest/urls.py文件，配置url
url('^sheng/$',views.sheng),
在瀏覽器中輸入如下網址
http://127.0.0.1:8000/sheng/
瀏覽效果如下圖
打開booktest/views.py文件，定義視圖shi，用于根據編號獲取對應的子級信息，如果傳遞的是省編號則獲取市信息，如果傳遞的是市編號則獲取區縣信息
#根據pid查詢子級區域信息
def shi(request):
sid=request.GET.get('sid')
slist=AreaInfo.objects.filter(aParent_id=sid)
slist2=[]
for s in slist:
slist2.append({'id':s.id,'title':s.atitle})
return JsonResponse({'slist':slist2})
打開booktest/urls.py文件，配置url
url('^shi/$',views.shi),
在瀏覽器中輸入如下網址
瀏覽效果如下圖
在瀏覽器中輸入如下網址
選擇效果如下圖
總結
以上所述是小編給大家介紹的Django中使用jquery的ajax進行數據交互的實例代碼，希望對大家有所幫助！
