Maison >interface Web >js tutoriel >Utiliser jquery et ajax pour l'interaction des données
Cette fois, je vais vous présenter l'utilisation de jquery et ajax pour l'interaction de données. Quelles sont les précautions pour utiliser jquery et ajax pour l'interaction de données. Ce qui suit est un cas pratique, jetons un coup d'oeil.
Le framework jquery fournit les méthodes $.ajax, $.get et $.post pour l'interaction asynchrone. Puisque Django utilise les contraintes CSRF par défaut, il est recommandé d'utiliser $.get
. Exemple : mettre en œuvre la sélection de province et de ville
Copiez le fichier jquery dans le répertoire static/js/
Ouvrez le fichier booktest/views.py et définissez viewarea1, qui permet d'afficher la liste déroulante
#提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html')
Ouvrez le fichier booktest/urls.py et configurez l'url
url('^area1/$',views.area1),
Créez 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>
dans le répertoire templates/booktest/ Exécutez le serveur et entrez l'URL suivante dans le navigateur
http://127.0.0.1:8000/area1/
L'effet de navigation est comme indiqué ci-dessous
Ouvrez le fichier booktest/views.py et définissez la vue utilisée pour obtenir des informations provinciales
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})
Ouvrez le fichier booktest/urls.py et configurez l'url
url('^sheng/$',views.sheng),
Saisissez l'URL suivante dans le navigateur
http://127.0.0.1:8000/sheng/
Ouvrez le fichier booktest/views.py et définissez la vue shi, qui est utilisée pour obtenir les informations de sous-niveau correspondantes en fonction du numéro. Si le numéro provincial est transmis, les informations sur la ville sont obtenues. les informations sur le district et le comté sont obtenues
#根据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})
Ouvrez le fichier booktest/urls.py et configurez l'url
url('^shi/$',views.shi),
Saisissez l'URL suivante dans le navigateur
http://127.0.0.1:8000/shi/?sid=140000/
Saisissez l'URL suivante dans le navigateur
http://127.0.0.1:8000/shi/
Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !
Lecture recommandée :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!