java 城市三级联动,包括表的建设以及后台

首先看下效果图:


当点击北京的时候,自动加载第二级以及第三级的数据。(二、三级默认的第一项)。

表的搭建:

java 城市三级联动,包括表的建设以及后台_第1张图片


这里注意PARENT_ID跟AREA_ID的关系,即北京市下面有很多区县,那么PARENT_ID的父类对应的都是1,方便我们的SQL语句查询。LEV是等级,因为是三级联动,所以目前我们分为1(直辖市及省会城市及特别行政区),2(地级市),3(区、县)。


前台代码:()


java 城市三级联动,包括表的建设以及后台_第2张图片


jquery:java 城市三级联动,包括表的建设以及后台_第3张图片

注意,我们这里返回的是一个List集合,因此我们要把他循环出来,取到他的areaId及areaName.取到的数据就是省以及直辖市的名称。(查询一级城市的时候,这个时候,我们就在xml文件的条件写where Lev=1,或者parent_id=0)如下图:


java 城市三级联动,包括表的建设以及后台_第4张图片


我们接着写第二级菜单的方法。(思路:当我们点击山西省时候,他会出现山西省的地级城市,因此,我们需要PARENT_ID作为参数,来传到后台作为查询语句),所以点击一级菜单的时候,调用getCity($(this).val())方法。

java 城市三级联动,包括表的建设以及后台_第5张图片


同样的,三级菜单跟二级菜单原理一样。

java 城市三级联动,包括表的建设以及后台_第6张图片


后台代码:()

java 城市三级联动,包括表的建设以及后台_第7张图片

java 城市三级联动,包括表的建设以及后台_第8张图片

XML文件:

java 城市三级联动,包括表的建设以及后台_第9张图片


我们的三级联动到这就完成了

你可能感兴趣的:(java 城市三级联动,包括表的建设以及后台)