データ対話に jquery と ajax を使用する

今回は、データのやり取りに jquery と ajax を使用する方法と、データのやり取りに jquery と ajax を使用する際の 注意事項 について紹介します。以下は実際的なケースです。見てみましょう。

jquery フレームワークは、非同期対話用の $.ajax、$.get、および $.post メソッドを提供します。Django はデフォルトで CSRF 制約を使用するため、$.get

を使用することをお勧めします。 例: 州と都市の選択を実装します

jquery ファイルを

static/js/ ディレクトリにコピーします

booktest/views.py ファイルを開き、

ドロップダウン リスト

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

を表示するために使用されるviewarea1を定義します booktest/urls.py ファイルを開き、URL を設定します

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

template/booktest/ ディレクトリに 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>

を作成します サーバーを起動し、ブラウザに次の URL を入力します

http://127.0.0.1:8000/area1/

閲覧効果は以下の通りです

booktest/views.py ファイルを開き、地方情報を取得するビューを定義します

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

りー

booktest/urls.py ファイルを開き、URL を設定します

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

ブラウザに次のURLを入力してください

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

booktest/views.py ファイルを開き、ビュー shi を定義します。これは、州番号が渡された場合は、市番号が渡された場合に、対応するサブレベル情報を取得するために使用されます。地区と郡の情報が取得されました

http://127.0.0.1:8000/sheng/

booktest/urls.py ファイルを開き、URL を設定します

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

ブラウザに次のURLを入力してください

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

ブラウザに次のURLを入力してください

http://127.0.0.1:8000/shi/

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がデータ対話に jquery と ajax を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。