使用jquery與ajax進行數據交互

這次帶給大家使用jquery與ajax進行數據交互，使用jquery與ajax進行數據交互的注意事項有哪些，下面就是實戰案例，一起來看一下。

# 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

nbsp;html>


 <meta>
 <title>Title</title>
 <script></script>
 <script>
  $(function () {
   $.get(&#39;/sheng/&#39;,function (data) {//{slist:[]}
    var slist=data.slist;//[{},{},{}...]
    var sheng=$(&#39;#sheng&#39;);
    $.each(slist,function (i,n) {
     //n==>{id:,title:}
     sheng.append(&#39;<option value="&#39;+n.id+&#39;">&#39;+n.title+&#39;&#39;)
    });
   });
   $(&#39;#sheng&#39;).change(function () {
    var sid=$(this).val();
    if(sid!=&#39;0&#39;){
     $.get(&#39;/shi/&#39;,{&#39;sid&#39;:sid},function (data) {
      var slist=data.slist;
      var shi=$(&#39;#shi&#39;).empty().append(&#39;<option value="0">请选择&#39;);
      $(&#39;#qu&#39;).empty().append(&#39;<option value="0">请选择&#39;);
      $.each(slist,function (i,n) {
       shi.append(&#39;<option value="&#39;+n.id+&#39;">&#39;+n.title+&#39;&#39;);
      });
     });
    }
   });
   $(&#39;#shi&#39;).change(function () {
    var sid=$(this).val();
    if(sid!=&#39;0&#39;){
     $.get(&#39;/shi/&#39;,{&#39;sid&#39;:sid},function (data) {
      var slist=data.slist;
      var shi=$(&#39;#qu&#39;).empty().append(&#39;<option value="0">请选择&#39;);
      $.each(slist,function (i,n) {
       shi.append(&#39;<option value="&#39;+n.id+&#39;">&#39;+n.title+&#39;&#39;);
      });
     });
    }
   });
  });
 </script>


<select>
 <option>请选择</option>
</select>
<select>
 <option>请选择</option>
</select>
<select>
 <option>请选择</option>
</select>

執行伺服器，在瀏覽器中輸入以下網址

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(aParentisnull=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),

在瀏覽器中輸入以下網址

http://127.0.0.1:8000/shi/?sid=140000/

在瀏覽器中輸入以下網址

http://127.0.0.1:8000/shi/

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是使用jquery與ajax進行數據交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！