Django 에서 jquery 의 ajax 를 사용 하여 데이터 인 터 랙 션 을 하 는 인 스 턴 스 코드
예시:성구 내의 선택 실현
최종 실현 효 과 는 그림 과 같다.
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 를 사용 하여 데이터 상호작용 을 하 는 인 스 턴 스 코드 입 니 다.도움 이 되 셨 으 면 합 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Django의 질문 및 답변 웹사이트환영 친구, 이것은 우리의 새로운 블로그입니다. 이 블로그에서는 , 과 같은 Question-n-Answer 웹사이트를 만들고 있습니다. 이 웹사이트는 회원가입 및 로그인이 가능합니다. 로그인 후 사용자는 사용자의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.