Django分析之三級下拉菜單選擇省/市/縣

      今天遇到了一個一直想做卻沒有機會去做的功能，今天完成了便記錄下來。

      那這次是具體是個什么功能呢？其實還是很簡單的效果，就是在用戶注冊的時候可以選擇省/市/縣，很簡單的一個小功能。

      那現在就開始了~首先我們要在數據庫中先建一個表，用來保存全國的省/市/縣信息，下面是表的結構：

CREATE TABLE  IF NOT EXISTS "china_regionalTable" (
  "id" integer NOT NULL,
  "name" varchar(50) DEFAULT NULL,
  "level" integer DEFAULT NULL,
  "parent" integer DEFAULT NULL,
  PRIMARY KEY ("id")
) ;

     剩下的就是按照這個格式去插入數據咯

insert  into "china_regionalTablet"("id","name","level","parent") values (110000,'北京市',1,0),(110100,'市轄區',2,110000).......

     現在數據庫里有數據了，因為我用的是Python的SQLAlchemyORM框架，所以下面就要寫model類來與數據庫中的表進行映射了

class ChinaRegionalTable(dash_models.Base):
    __tablename__ = 'china_regionalTable'

    id = Column(SmallInteger,nullable=False,primary_key=True)
    name = Column(String(200))
    level = Column(SmallInteger,nullable=False)
    parent = Column(SmallInteger,nullable=False)

     那么現在就是在view層來處理來自前端的請求了

#注冊頁面選擇區縣
def get_city(request):
    parent = int(request.POST['parent'])
    level = request.POST['level']
    s = request.get_session()
    citys = s.query(ChinaRegionalTable).filter_by(parent=parent,level=level).all()
    dict_city = []
    for city in citys:
        temp = []
        temp.append(city.id)
        temp.append(city.name)
        dict_city.append(temp)
    return HttpResponse(json.dumps({"dict_city":dict_city}))

     這其中是通過get_session()來取得與數據庫的連接的，下面就是一個URL的路由表了

url(r'^ajax/get_city/$' ,'get_city'),

     接下來就是前端頁面的代碼了，首先是部分靜態的HTML代碼：

<div class="input-group" style="margin-bottom: 10px;margin-left: 70px;">
        <span class="input-group-addon" style="padding: 5px 10px"><i class="glyphicon glyphicon-info-sign"></i></span>
        <select id="shengcode" >
             <option selected value="">請選擇省份</option>
        </select>
        <select id="shicode" >
             <option selected value="">請選擇</option>
        </select>
        <select id="xiancode" >
             <option selected value="">請選擇</option>
        </select>
</div>

    因為使用的是jQuery，所以采用的是當頁面第一次加載完成的時候就發送一個ajax請求到后台取得第一級的內容，然后綁定事件，當我選擇第一級下拉菜單中的內容的時候我便會去后台查找，然后返回第二級菜單的內容，從而以此類推，直到結束。

$(function(){
        $.ajax({
            type:'POST',
            url:'/app/ajax/get_city/',
            data:{"parent":0,"level":1},
            success:function(data){
                var all_ps=data['dict_city']
<!--這里取得結果后，然后遍歷出結果填充在對應的html頁面中-->
                for(var i=0;i<all_ps.length;i++){
                    var $html=String.format('<option value="{0}">{1}</option>',all_ps[i][0],all_ps[i][1])
                    $('#shengcode').append($html)
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("error");
                    },
            dataType: 'json'
        });

        $('#shengcode').change(function(){
            var parent = $('#shengcode').val()
            $.ajax({
            type:'POST',
            url:'/app/ajax/get_city/',
            data:{"parent":parent,"level":2},
            success:function(data){
                var all_ps=data['dict_city']
<!--在填充之前將后面的幾個下拉菜單制空-->
                var $shicode = $('#shicode').empty();
                $shicode.append('<option selected value="">請選擇</option>')
                var $xiancode = $('#xiancode').empty();
                $xiancode.append('<option selected value="">請選擇</option>')
                for(var i=0;i<all_ps.length;i++){
                    var $html=String.format('<option value="{0}">{1}</option>',all_ps[i][0],all_ps[i][1])
                    $('#shicode').append($html)
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("error");
                    },
            dataType: 'json'
        });
        })

         $('#shicode').change(function(){
            var parent = $('#shicode').val()
            $.ajax({
            type:'POST',
            url:'/app/ajax/get_city/',
            data:{"parent":parent,"level":3},
            success:function(data){
                var all_ps=data['dict_city']
                var $xiancode = $('#xiancode').empty();
                $xiancode.append('<option selected value="">請選擇</option>')
                for(var i=0;i<all_ps.length;i++){
                    var $html=String.format('<option value="{0}">{1}</option>',all_ps[i][0],all_ps[i][1])
                    $('#xiancode').append($html)
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("error");
                    },
            dataType: 'json'
        });
        })
    })

       到此為止，這個簡單的小功能就算徹底實現了，但是還是有個小小的不爽，就是雖然三次請求都是使用的一個url地址，而且也都使用的是一個view函數來處理的，但是前端的js代碼卻要寫三次，感覺有些累贅，如果能有更好的意見感謝各位大神告知小弟Orz….