데이터 상호작용을 위해 jquery 및 ajax 사용-JS 튜토리얼-php.cn

데이터 상호작용을 위해 jquery 및 ajax 사용

php中世界最好的语言

풀어 주다： 2018-04-17 14:31:29

원래의

1862명이 탐색했습니다.

이번에는 데이터 상호작용을 위해 jquery와 ajax를 사용하는 Notes를 소개하겠습니다.

jquery 프레임워크는 비동기 상호작용을 위해 $.ajax, $.get 및 $.post 메소드를 제공합니다. Django는 기본적으로 CSRF 제약조건을 사용하므로 $.get

을 사용하는 것이 좋습니다. 예: 지방 및 도시 선택 구현

jquery 파일을 static/js/ 디렉토리

에 복사하세요. booktest/views.py 파일을 열고 드롭다운 목록

#提供显示下拉列表的控件，供用户操作
def area1(request):
 return render(request,'booktest/area1.html')

로그인 후 복사

을 표시하는 데 사용되는

view

area1을 정의합니다. booktest/urls.py 파일을 열고 url

url('^area1/$',views.area1),

로그인 후 복사

을 구성하세요. template/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>

로그인 후 복사

을 생성하세요. 서버를 실행하고 브라우저에 다음 URL을 입력하세요

http://127.0.0.1:8000/area1/

브라우징 효과는 아래와 같습니다

데이터 상호작용을 위해 jquery 및 ajax 사용

booktest/views.py 파일을 열고 지역 정보를 얻기 위한 뷰를 정의하세요

url('^sheng/$',views.sheng),

로그인 후 복사

데이터 상호작용을 위해 jquery 및 ajax 사용

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

로그인 후 복사

을 구성하세요. 브라우저에 다음 URL을 입력하세요

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