Using jquery and ajax for data interaction

This time I will bring you the use of jquery and ajax for data interaction. What are the precautions for using jquery and ajax for data interaction? The following is a practical case, let's take a look.

The jquery framework provides $.ajax, $.get, and $.post methods for asynchronous interaction. Since Django uses CSRF constraints by default, it is recommended to use $.get

Example: Implement province and city selection

Copy the jquery file to the

static/js/ directory

Open the booktest/views.py file and define

view area1, used to display drop-down list

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

Open the booktest/urls.py file and configure url

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

Create 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>

in the templates/booktest/ directory Run the server and enter the following URL in the browser

http://127.0.0.1:8000/area1/

The browsing effect is as shown below

Open the booktest/views.py file and define the view, which is used to obtain provincial information

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

Open the booktest/urls.py file and configure url

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

Enter the following URL in the browser

http://127.0.0.1:8000/sheng/

Open the booktest/views.py file and define the view shi, which is used to obtain the corresponding sub-level information based on the number. If the provincial number is passed, the city information is obtained. If the city number is passed, the district and county information is obtained.

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

Open the booktest/urls.py file and configure url

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

Enter the following URL in the browser

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

Enter the following URL in the browser

http://127.0.0.1:8000/shi/

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Using jquery and ajax for data interaction. For more information, please follow other related articles on the PHP Chinese website!