Django using jquery ajax data interaction example code

The jquery framework provides $.ajax, $.get, $.post methods for asynchronous interactions, due to the default use of CSRF constraints in Django, it is recommended to use the $.get

Example: Realization of the selection of provincial and municipal districts

The final realization of the effect is shown in the figure:

Copy the jquery file to the static/js/ directory

Open the booktest/ file and define the view area1 for displaying the drop-down list

# Provide controls that display drop-down lists for users to manipulate
def area1(request):
 return render(request,'booktest/')

Open the booktest/ file and configure the url

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

In the templates/booktest/ directory create the

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/static/js/jquery-1.12."></script>
 <script>
  $(function () {
   $.get('/sheng/',function (data) {//{slist:[]}
    var slist=;//[{},{},{}...]
    var sheng=$('#sheng');
    $.each(slist,function (i,n) {
     //n==>{id:,title:}
     ('<option value="'++'">'++'</option>')
    });
   });

   $('#sheng').change(function () {
    var sid=$(this).val();
    if(sid!='0'){
     $.get('/shi/',{'sid':sid},function (data) {
      var slist=;
      var shi=$('#shi').empty().append('<option value="0"> please choose </option>');
      $('#qu').empty().append('<option value="0"> please select </option>');
      $.each(slist,function (i,n) {
       ('<option value="'++'">'++'</option>');
      });
     });
    }
   });

   $('#shi').change(function () {
    var sid=$(this).val();
    if(sid!='0'){
     $.get('/shi/',{'sid':sid},function (data) {
      var slist=;
      var shi=$('#qu').empty().append('<option value="0"> please select </option>');
      $.each(slist,function (i,n) {
       ('<option value="'++'">'++'</option>');
      });
     });
    }
   });
  });
 </script>
</head>
<body>
<select >
 <option value="0">please select</option>
</select>
<select >
 <option value="0">please select</option>
</select>
<select >
 <option value="0">please select</option>
</select>
</body>
</html>

Run the server and enter the following URL in your browser

http://127.0.0.1:8000/area1/

The browsing result is shown below

Open the booktest/ file and define the view sheng, which is used to get the province information

url('^sheng/$',),

from  import JsonResponse
def sheng(request):
 slist=(aParent__isnull=True)
 '''
 [{id:,title:},{},{}]
 '''
 slist2=[]
 for s in slist:
  ({'id':,'title':})
 return JsonResponse({'slist':slist2})

Open the booktest/ file and configure the url

url('^sheng/$',),

Enter the following URL in your browser

http://127.0.0.1:8000/sheng/

The browsing result is shown below

Open the booktest/ file and define the view shi, which is used to get the corresponding sub-level information based on the number, or the city information if the province number is passed, or the district information if the city number is passed

# Query sub-level region information based on pid
def shi(request):
 sid=('sid')
 slist=(aParent_id=sid)
 slist2=[]
 for s in slist:
  ({'id':,'title':})
 return JsonResponse({'slist':slist2})

Open the booktest/ file and configure the url

url('^shi/$',),

Enter the following URL in your browser

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

The browsing result is shown below

Enter the following URL in your browser

http://127.0.0.1:8000/shi/

The selection effect is shown below

summarize

The above is a small introduction to the Django in the use of jquery ajax data interaction example code, I hope to help you!