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….