您当前的位置: 今天遇到了一个一直想做却没有机会去做的功能，今天完成了便记录下来。
那这次是具体是个什么功能呢？其实还是很简单的效果，就是在用户注册的时候可以选择省/市/县，很简单的一个小功能。
那现在就开始了~首先我们要在数据库中先建一个表，用来保存全国的省/市/县信息，下面是表的结构：
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….