loading data dynamically and asynchronously on ajax call

.py

def getParentMenuList(request):
    try:
        cursor = connection.cursor()
        resultList=[]
        cursor.execute("SELECT id,func_name FROM '表名称' WHERE parent_id IS NULL")
        result = cursor.fetchall()
        for row in result:
            resultList.append(str(row[0])+","+str(row[1]))
        return JsonResponse({'parent_menu': resultList})
    except:
        pass


def get_child_menu_dynamically(request):

    parent_id = request.GET.get("parent_id")

    try:
        cursor = connection.cursor()
        resultList = []
        cursor.execute(
            "SELECT id,func_name FROM '表名称' WHERE secondary_menu_id=0 and parent_id=%s" % str(
                parent_id))
        result = cursor.fetchall()

        for row in result:
            resultList.append(str(row[0]) + "," + str(row[1]) )
        return JsonResponse({'child_menu': resultList})
    except:
        pass

.html

<div class="portlet-body form">
                                                <!-- BEGIN FORM-->
 <form  class="form-horizontal" id="function-form" method="post">
        {% csrf_token %}
       <div class="form-body">
               <div class="form-group">
                        <label class="col-md-3 control-label">一级菜单</label>
                                <div class="col-md-4">
                                         <select name="sel_class" id="sel_class"  style="border: 1px solid cornflowerblue; width: 335px; height: 30px;" onchange="myfunc()">
    <option id="selected_option" value="{{ sel_class }}">{{ sel_class }}</option>
                                                                </select>
                                                            </div>
                                                        </div>

       <div class="form-group">
                  <label class="col-md-3 control-label">二级菜单</label>
                             <div class="col-md-4">
                                      <select name="sel_class1" id="sel_class1"  style="border: 1px solid cornflowerblue; width: 335px; height: 30px"></select></div>
            <span class="hidden" id="s1" style="color: red;">二级菜单加载中...</span</div>


     <div class="form-group">
                 <label class="col-md-3 control-label">功能编码</label>
                             <div class="col-md-4">
                                       <input type="text" class="form-control input-circle" placeholder="请输入新的url或置空" name="func_code" id = "func_code"></div> </div>
        <div class="form-group">
               <label class="col-md-3 control-label">功能名称</label>
                         <div class="col-md-4">
                                <input type="text" class="form-control input-circle" placeholder="请输入唯一的功能名称" name="func_name" id="func_name"> </div></div> </div>
         <div class="">
                  <div class="row">
                           <div class="col-md-offset-3 col-md-9 ">
                              <button type="submit" class="btn btn-circle green" >提交</button</div></div></div>

               </form>
                  <!-- END FORM-->

                           </div>

.js

$('#function-form').submit(function(){
                        $.ajax({
                            type:"post",
                            url: "/auth/authmanager/thirdmenu/submit/",
                            cache: false,
                            data:$('#function-form').serialize(),
                            success: function(result){

                                if (result.code === 1){
                                    alert('操作成功！');
                                }
                                else if (result.code === 2){
                                    alert('功能名称不能为空！')
                                }
                                else if(result.code === 3){
                                    alert('该功能名称已存在，不能重复，请重新输入！')
                                }
                                else if (result.code === 4){
                                    alert('此非空url已存在，不能重复，请重新输入！')
                                }
                                else if (result.code === 6){
                                    alert('一级菜单或二级菜单不能为空！')
                                }

                                else{
                                    alert('操作失败')
                                }
                            },
                            error: function(){
                                 alert("操作失败,请联系管理员");
                             }

                        });
                        return false
                });


$(document).ready(function(){
                    get_parent_menu();

            });

            function get_parent_menu(){   //到页面后 通过ajax 异步动态生成该父类菜单。
                $.ajax({
                    type: "get",
                    url: '/index/get_parent_func',
                    async: true,
                    success: function (data) {
                        data.parent_menu.forEach(function(val,index) {
                            the_val = data.parent_menu[index].split(',')[0];
                            the_text = data.parent_menu[index].split(',')[1];
                            $("#sel_class").append("<option value='"+the_val+"' >"+the_text+"</option>")
                        })
                    }
                })
            }

            function myfunc(param) {  //根据父标签的onchange事件，调用该函数，发送ajax请求，取出相应的子菜单数据。
                var options=$("#sel_class option:selected").val();
                $.ajax({
                    type: "get",
                    url: '/index/get_child_menu_dynamically?parent_id='+options,
                    async: true,
                    cache:true,
                    beforeSend:function(){
                      var content = $('#s1');
                      var menu1_content = $('#sel_class option:selected');
                        content.removeClass('hidden');
                        if (menu1_content.val() === ''){
                            content.addClass('hidden')
                        }
                    },
                    success:function (data) {
                        //console.log(data.child_menu)
                        var data_children = data.child_menu;
                        $('#sel_class1').empty();
                        data.child_menu.forEach(function (val,index) {
                            the_name = data.child_menu[index].split(',')[1];
                            the_val = data.child_menu[index].split(',')[0];
                             $("#sel_class1").append("<option value='"+the_val+"'>" + the_name + "</option>");
                        });

                    },
                    complete:function () {
                        var content = $('#s1');
                        content.addClass('hidden')
                    }

                })
            }

异步加载数据，动态追加元素到页面，动态生成html标签中的内容。
好处：
It just makes the query incrementally rather than pulling the entire data set all at once.