Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的實(shí)例代碼

更新時(shí)間：2017年10月15日 17:19:07 作者：Crazymagic

這篇文章主要介紹了Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下

jquery框架中提供了$.ajax、$.get、$.post方法，用于進(jìn)行異步交互，由于Django中默認(rèn)使用CSRF約束，推薦使用$.get

示例：實(shí)現(xiàn)省市區(qū)的選擇

最終實(shí)現(xiàn)效果如圖：

將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/目錄下創(chuàng)建area1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/static/js/jquery-1.12.4.min.js"></script>
 <script>
  $(function () {
   $.get('/sheng/',function (data) {//{slist:[]}
    var slist=data.slist;//[{},{},{}...]
    var sheng=$('#sheng');
    $.each(slist,function (i,n) {
     //n==>{id:,title:}
     sheng.append('<option value="'+n.id+'">'+n.title+'</option>')
    });
   });

   $('#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('<option value="0">請(qǐng)選擇</option>');
      $('#qu').empty().append('<option value="0">請(qǐng)選擇</option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });

   $('#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('<option value="0">請(qǐng)選擇</option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });
  });
 </script>
</head>
<body>
<select id="sheng">
 <option value="0">請(qǐng)選擇</option>
</select>
<select id="shi">
 <option value="0">請(qǐng)選擇</option>
</select>
<select id="qu">
 <option value="0">請(qǐng)選擇</option>
</select>
</body>
</html>

運(yùn)行服務(wù)器，在瀏覽器中輸入如下網(wǎng)址

http://127.0.0.1:8000/area1/

瀏覽效果如下圖

打開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),

在瀏覽器中輸入如下網(wǎng)址

http://127.0.0.1:8000/sheng/

瀏覽效果如下圖

打開booktest/views.py文件，定義視圖shi，用于根據(jù)編號(hào)獲取對(duì)應(yīng)的子級(jí)信息，如果傳遞的是省編號(hào)則獲取市信息，如果傳遞的是市編號(hào)則獲取區(qū)縣信息

#根據(jù)pid查詢子級(jí)區(qū)域信息
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