Utiliser jquery et ajax pour l'interaction des données-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-17 14:31:29

original

1895 Les gens l'ont consulté

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')

Copier après la connexion

Ouvrez le fichier booktest/urls.py et configurez l'url

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

Copier après la connexion

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>

Copier après la connexion

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),

Copier après la connexion

Utiliser 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})

Copier après la connexion

Ouvrez le fichier booktest/urls.py et configurez l'url

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

Copier après la connexion

Saisissez l'URL suivante dans le navigateur

http://127.0.0.1:8000/sheng/

Copier après la connexion

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})

Copier après la connexion

Ouvrez le fichier booktest/urls.py et configurez l'url

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

Copier après la connexion

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!