這次帶給大家使用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('/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+'')
});
});
$('#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">请选择');
$('#qu').empty().append('<option value="0">请选择');
$.each(slist,function (i,n) {
shi.append('<option value="'+n.id+'">'+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('<option value="0">请选择');
$.each(slist,function (i,n) {
shi.append('<option value="'+n.id+'">'+n.title+'');
});
});
}
});
});
</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中文網其他相關文章！
