Django 에서 jquery 의 ajax 를 사용 하여 데이터 인 터 랙 션 을 하 는 인 스 턴 스 코드

jquery 프레임 워 크 에 서 는$.aajax,$.get,$.post 방법 을 제공 하여 비동기 적 인 상호작용 을 할 수 있 습 니 다.Django 에 서 는 기본적으로 CSRF 제약 을 사용 하기 때문에$.get 을 추천 합 니 다.
예시:성구 내의 선택 실현
최종 실현 효 과 는 그림 과 같다.

jquery 파일 을 static/js/디 렉 터 리 에 복사 합 니 다.

booktest/views.py 파일 을 열 고 보기 area 1 을 정의 하여 드 롭 다운 목록 을 표시 합 니 다.

#           ,     
def area1(request):
 return render(request,'booktest/area1.html')
booktest/urls.py 파일 을 열 고 url 을 설정 합 니 다.

url('^area1/$',views.area1),
templates/booktest/디 렉 터 리 에 area 1.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">   </option>');
      $('#qu').empty().append('<option value="0">   </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">   </option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });
  });
 </script>
</head>
<body>
<select id="sheng">
 <option value="0">   </option>
</select>
<select id="shi">
 <option value="0">   </option>
</select>
<select id="qu">
 <option value="0">   </option>
</select>
</body>
</html>
서버 를 실행 하고 브 라 우 저 에 다음 주 소 를 입력 하 십시오.
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),
브 라 우 저 에 다음 주 소 를 입력 하 십시오.

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/
선택 효 과 는 다음 그림 과 같 습 니 다.

총결산
위 에서 말 한 것 은 소 편 이 소개 한 Django 에서 jquery 의 ajax 를 사용 하여 데이터 상호작용 을 하 는 인 스 턴 스 코드 입 니 다.도움 이 되 셨 으 면 합 니 다!

좋은 웹페이지 즐겨찾기