Verwendung von JQuery und Ajax für die Dateninteraktion

Dieses Mal werde ich Ihnen die Verwendung von JQuery und Ajax für die Dateninteraktion vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von JQuery und Ajax für die Dateninteraktion?

Das JQuery-Framework stellt die Methoden $.ajax, $.get und $.post für die asynchrone Interaktion bereit. Da Django standardmäßig CSRF-Einschränkungen verwendet, wird die Verwendung von $.get

empfohlen Beispiel: Provinz- und Stadtauswahl implementieren

Kopieren Sie die JQuery-Datei in das Verzeichnis static/js/

Öffnen Sie die Datei booktest/views.py und definieren Sie viewarea1, das zum Anzeigen der Dropdown-Liste

#提供显示下拉列表的控件，供用户操作
def area1(request):
 return render(request,'booktest/area1.html')

verwendet wird Öffnen Sie die Datei booktest/urls.py und konfigurieren Sie die URL

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

Erstellen Sie „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>

“ im Verzeichnis „templates/booktest/“. Starten Sie den Server und geben Sie die folgende URL in den Browser ein

http://127.0.0.1:8000/area1/

Der Browsing-Effekt ist wie unten gezeigt

Öffnen Sie die Datei booktest/views.py und definieren Sie die Ansicht, die zum Abrufen von Provinzinformationen verwendet wird

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

Öffnen Sie die Datei booktest/urls.py und konfigurieren Sie die URL

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

Geben Sie im Browser die folgende URL ein

http://127.0.0.1:8000/sheng/

Öffnen Sie die Datei booktest/views.py und definieren Sie die Ansicht shi, die verwendet wird, um die entsprechenden Unterebeneninformationen basierend auf der Nummer zu erhalten, wenn die Stadtnummer übergeben wird. Die Bezirks- und Kreisinformationen werden abgerufen

#根据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})

Öffnen Sie die Datei booktest/urls.py und konfigurieren Sie die URL

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

Geben Sie im Browser die folgende URL ein

http://127.0.0.1:8000/shi/?sid=140000/

Geben Sie im Browser die folgende URL ein

http://127.0.0.1:8000/shi/

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonVerwendung von JQuery und Ajax für die Dateninteraktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!