Maison >interface Web >js tutoriel >Utiliser jquery et ajax pour l'interaction des données

Utiliser jquery et ajax pour l'interaction des données

php中世界最好的语言
php中世界最好的语言original
2018-04-17 14:31:291873parcourir

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

Utiliser jquery et ajax pour linteraction des données

Ouvrez le fichier booktest/views.py et définissez la vue utilisée pour obtenir des informations provinciales

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

Utiliser jquery et ajax pour linteraction des donnéesUtiliser jquery et ajax pour linteraction des données

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn