Using jquery and ajax for data interaction-JS Tutorial-php.cn

Using jquery and ajax for data interaction

php中世界最好的语言

Release： 2018-04-17 14:31:29

Original

1901 people have browsed it

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

Copy after login

Open the booktest/urls.py file and configure url

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

Copy after login

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>

Copy after login

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

Using jquery and ajax for data interaction

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

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

Copy after login

Using jquery and ajax for data interaction

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

Copy after login

Open the booktest/urls.py file and configure url

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

Copy after login

Enter the following URL in the browser

http://127.0.0.1:8000/sheng/

Copy after login

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

Copy after login

Open the booktest/urls.py file and configure url

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

Copy after login

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!