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

php中世界最好的语言
풀어 주다: 2018-04-17 14:31:29
원래의
1865명이 탐색했습니다.

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

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

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

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

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

을 표시하는 데 사용되는

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 사용데이터 상호작용을 위해 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

url('^shi/$',views.shi),
로그인 후 복사

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

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

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

http://127.0.0.1:8000/shi/

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:



위 내용은 데이터 상호작용을 위해 jquery 및 ajax 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿