案例：省市区选择

• 本案例讲解在Django中使用jquery的ajax进行数据交互
• jquery框架中提供了$.ajax、$.get、$.post方法，用于进行异步交互

需求：

以下代码为需求实现步骤

• 1.展示省市区选择页面

    # 省市区选择urls
    url(r'^area/$', views.area),
  

    # 省市区选择视图
    def area(request):
        return render(request, 'Book/area.html')
  

    <select id="sheng">
        <option value="0">请选择</option>
    </select>
  
    <select id="shi">
        <option value="0">请选择</option>
    </select>
  
    <select id="qu">
        <option value="0">请选择</option>
    </select>
  

• 2.发送ajax请求获取并展示省份信息

  • 加载jquery

    

    # 省份信息
    url(r'^sheng/$', views.sheng),
    

    # 查询省份信息,并构造json数据
    def sheng(request):
      # 查询省份信息
      shenglist = AreaInfo.objects.filter(parent__isnull=True)
    
      # 构造json {"list":[[id, name],[id, name],...]}
      list = []
      for sheng in shenglist:
          list.append([sheng.id, sheng.name])
      shengdata = {"list":list}
    
      return JsonResponse(shengdata)
    

    <script>
      {# DOM加载完执行的操作 #}
      $(function () {
          {# ajax请求省份信息 #}
          $.get('/sheng/', function (shengdata) {
              {# 获取省份标签 #}
              shengtag = $('#sheng');
              {# 遍历省份信息列表 #}
              $.each(shengdata.list, function (i,sheng) {
                  {# 拼接省份标签内容 #}
                  shengtag.append('<option value="'+sheng[0]+'">'+sheng[1]+'</option>');
              });
          });
      });
    </script>
    

• 3.发送ajax请求获取并展示市信息

  • 根据选中的省份id作为参数查询对应的市信息

    # 市信息
    url(r'^shi/$', views.shi),
    

    # 根据省份id查询市信息，并构造json数据
    def shi(request):
      # 从请求报文中获取请求参数shengid
      shengid = request.GET.get('shengid')
      # 根据省份id查询市信息
      shilist = AreaInfo.objects.filter(parent=shengid)
    
      # 构造json {"list":[{"id":*, "name":*}, {"id":*, "name":*}, ...]}
      list = []
      for shi in shilist:
          list.append({"id":shi.id, "name":shi.name})
      shidata = {"list": list}
    
      return JsonResponse(shidata)
    

    <script>
      {# DOM加载完执行的操作 #}
      $(function () {
          {# ajax请求省份信息 #}
          $.get('/sheng/', function (shengdata) {
              {# 获取省份标签 #}
              shengtag = $('#sheng');
              {# 遍历省份信息列表 #}
              $.each(shengdata.list, function (i,sheng) {
                  {# 拼接省份标签内容 #}
                  shengtag.append('<option value="'+sheng[0]+'">'+sheng[1]+'</option>');
              });
          });
    
          {# 当省份选项变化时执行的函数 #}
          $('#sheng').change(function () {
              {# 获取选中的省份id #}
              shengid = $(this).val();
              {# 省份id作为ajax请求参数获取市信息 #}
              $.get('/shi/', {'shengid':shengid}, function (shidata) {
                  {# 获取市标签: 为防止上次内容拼接到本次，需清空标签内容 #}
                  shitag = $('#shi').empty().append('<option value="0">请选择</option>');
                  {# 遍历市信息列表 #}
                  $.each(shidata.list, function (i, shi) {
                      {# 拼接市标签内容 #}
                      shitag.append('<option value="'+shi.id+'">'+shi.name+'</option>');
                  });
              });
          });
      });
    </script>
    

• 3.发送ajax请求获取并展示区信息

  • 根据选中的市id作为参数查询对应的区信息

    # 区信息
    url(r'^qu/$', views.qu),
    

    # 根据市id查询区信息，并构造json数据
    def qu(request):
      # 从请求报文中获取请求参数shiid
      shiid = request.GET.get('shiid')
      # 根据市id查询区信息
      qulist = AreaInfo.objects.filter(parent=shiid)
    
      # 构造json {"list":[{"id":*, "name":*}, {"id":*, "name":*}, ...]}
      list = []
      for qu in qulist:
          list.append({"id":qu.id, "name":qu.name})
      qudata = {"list": list}
    
      return JsonResponse(qudata)
    

    <script>
      {# DOM加载完执行的操作 #}
      $(function () {
          {# ajax请求省份信息 #}
          $.get('/sheng/', function (shengdata) {
              {# 获取省份标签 #}
              shengtag = $('#sheng');
              {# 遍历省份信息列表 #}
              $.each(shengdata.list, function (i,sheng) {
                  {# 拼接省份标签内容 #}
                  shengtag.append('<option value="'+sheng[0]+'">'+sheng[1]+'</option>');
              });
          });
    
          {# 当省份选项变化时执行的函数 #}
          $('#sheng').change(function () {
              {# 获取选中的省份id #}
              shengid = $(this).val();
              {# 省份id作为ajax请求参数获取市信息 #}
              $.get('/shi/', {'shengid':shengid}, function (shidata) {
                  {# 获取市标签: 为防止上次内容拼接到本次，需清空标签内容 #}
                  shitag = $('#shi').empty().append('<option value="0">请选择</option>');
                  {# 遍历市信息列表 #}
                  $.each(shidata.list, function (i, shi) {
                      {# 拼接市标签内容 #}
                      shitag.append('<option value="'+shi.id+'">'+shi.name+'</option>');
                  });
              });
          });
    
          {# 当市选项变化时执行的函数 #}
          $('#shi').change(function () {
              {# 获取选中的市id #}
              shiid = $(this).val();
              {# 市id作为ajax请求参数获取区信息 #}
              $.get('/qu/', {'shiid':shiid}, function (qudata) {
                  {# 获取标签: 为防止上次内容拼接到本次，需清空标签内容 #}
                  qutag = $('#qu').empty().append('<option value="0">请选择</option>');
                  {# 遍历市信息列表 #}
                  $.each(qudata.list, function (i, qu) {
                      {# 拼接市标签内容 #}
                      qutag.append('<option value="'+qu.id+'">'+qu.name+'</option>');
                  });
              });
          });
      });
    </script>