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(&#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>

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!