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

Title

$(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進行數據交互的實例代碼，希望對大家有所幫助！

總結

以上是生活随笔為你收集整理的ajax数据交互代码,Django中使用jquery的ajax进行数据交互的实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

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