前端點選連結--->> 路由到url.py，找到views.py裡響應的處理函式--->> views.py裡處理邏輯，返回data渲染頁面--->>渲染資料到子模版（子模版繼承父模板）

1、前端點選連結(href新增路由路徑)

2、路由到url.py，找到views.py裡響應的處理函式（如 函式SSherot）

3、views.py裡處理邏輯，返回data渲染頁面（tablet.html是一個子模板。用data渲染它）

4、渲染資料到子模版（子模版繼承父模板）

續更。。。

前端用了jquery之後，互動變得簡單了很多，續更一下...

1、前端（建立在jquery成功匯入的情況）

<!--實現點選branchId，請求svn版本資料，重新整理在一列option中-->
<!--js程式碼--><!---->
{%block js%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#branchId').change(function(){
            var branch_name = $("#branchId").find("option:selected").text();<!--獲取option的text值-->
            console.log(branch_name)
<!--第一個引數是路由路徑('init是url.py檔案裡path的name引數),第二個引數是提交的資料,第三個是返回的資料，通過data.字典名獲取'-->
            $.get("{% url 'init' %}",{"branch_name":branch_name},function(data){
                alert(data.teList);
<!--迴圈遍歷list,當返回為字典時，改為$.each(data.teList,function(key,value){});-->
                $.each(data.teList,function(i,item){
<!--生成option標籤，並將list每一項新增到標籤中，，#versionId是select的id，使用如下方法新增-->
                    var opti = document.createElement('option');
                    opti.innerHTML = item
                    $('#versionId').append(opti)
                });
            });
        });      
    });
</script>   
{%endblock js%} 

<!--html程式碼-->
 <select style="width:150px;height:25px" name="version_name" id="versionId" ></select>
 

看一下結果：

2、路由and後端

#url.py檔案
path('baset/init/',query.svnInit,name='init')  #name為jquery的訪問路徑

#views.py檔案
return JsonResponse({"teList":teList})     #返回json資料，js程式碼可以看到返回資料的獲取