今天遇到了一个一直想做却没有机会去做的功能，今天完成了便记录下来。
那这次是具体是个什么功能呢？其实还是很简单的效果，就是在用户注册的时候可以选择省/市/县，很简单的一个小功能。
那现在就开始了~首先我们要在数据库中先建一个表，用来保存全国的省/市/县信息，下面是表的结构：
CREATETABLEIFNOTEXISTS"china_regionalTable" (
"id"integerNOTNULL,
"name"varchar(50)DEFAULTNULL,
"level"integerDEFAULTNULL,
"parent"integerDEFAULTNULL,PRIMARYKEY("id")
) ;
剩下的就是按照这个格式去插入数据咯
insertinto"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层来处理来自前端的请求了
#注册页面选择区县defget_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=[]forcityincitys:
temp=[]
temp.append(city.id)
temp.append(city.name)
dict_city.append(temp)returnHttpResponse(json.dumps({"dict_city":dict_city}))
这其中是通过get_session()来取得与数据库的连接的，下面就是一个URL的路由表了
url(r'^Ajax/get_city/$','get_city'),
接下来就是前端页面的代码了，首先是部分静态的HTML代码：
<divclass="input-group"style="margin-bottom: 10px;margin-left: 70px;"><spanclass="input-group-addon"style="padding: 5px 10px"><iclass="glyphicon glyphicon-info-sign"></i></span><selectid="shengcode"><optionselected value="">请选择省份</option></select><selectid="shicode"><optionselected value="">请选择</option></select><selectid="xiancode"><optionselected value="">请选择</option></select></div>
因为使用的是jQuery，所以采用的是当页面第一次加载完成的时候就发送一个ajax请求到后台取得第一级的内容，然后绑定事件，当我选择第一级下拉菜单中的内容的时候我便会去后台查找，然后返回第二级菜单的内容，从而以此类推，直到结束。
$(function(){
$.ajax({
type:'POST',
url:'/app/ajax/get_city/',
data:{"parent":0,"level":1},
success:function(data){varall_ps=data['dict_city']<!--这里取得结果后，然后遍历出结果填充在对应的html页面中-->for(vari=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(){varparent = $('#shengcode').val()
$.ajax({
type:'POST',
url:'/app/ajax/get_city/',
data:{"parent":parent,"level":2},
success:function(data){varall_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(vari=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(){varparent = $('#shicode').val()
$.ajax({
type:'POST',
url:'/app/ajax/get_city/',
data:{"parent":parent,"level":3},
success:function(data){varall_ps=data['dict_city']var$xiancode = $('#xiancode').empty();
$xiancode.append('<option selected value="">请选择</option>')for(vari=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….