省市三级联动（数据库）

1.jsp

   <tr> 
        <td style="width: 110px;" align="right">所属省份：</td>
         <td>
              <select class="select"  name="province"  id="province" οnchange="getCity()"   style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">

                    </select>
        </td>
    </tr>
    <tr>
        <td style="width: 110px;" align="right"> 所属市级：</td>
        <td>                 
              <select class="select"  name="city" id="city"  οnchange="getArea()" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
  
              </select>  
        </td>
       </tr>
       <tr>
            <td style="width: 110px;" align="right"> 所属县区： </td>
            <td>                    
              <select class="select"  name="counties"  id="counties" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
         
              </select>                        
         </td>
    </tr>

2.js

$("#addTax").click(function(){
   /*加载省下拉选*/ 
    $.ajax({ 
              type: "post", 
              url: adminPath+"/area/getProvince", 
              dataType: "json",
              success: function (data) {
             console.log(data);
             var proHtml = '<option value="0">请选择</option>';
             $.each(data, function (index, value) {
              proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
             });
          $("#province").html(proHtml);
              }
   });  
   
  });
  

/*加载市下拉选*/ 
     function getCity() { 
         var id = $("#province").val(); 
         $("#city").empty(); 
         $("#counties").empty(); 
         $.ajax({ 
              type: "post", 
              url: adminPath+"/area/getCity", 
              data: {"id": id}, 
              success: function (data) { 
               console.log(data);
            var proHtml = "<option value='0' selected='selected' >" + '请选择' + "</option>";
             $.each(data, function (index, value) {
              proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
             });
         $("#city").html(proHtml);            
                  $("#counties").append("<option value='0' selected='selected' >" + '请选择' + "</option>"); 
              
              }, 
              error: function () { 
                  alert("加载市失败"); 
              } 
         }); 
     } 
  
     /*加载地区下拉选*/ 
        function getArea() { 
            var id = $("#city").val(); 
            $("#counties").empty(); 
            $.ajax({ 
                 type: "post", 
                 url: adminPath+"/area/getArea", 
                 data: {"id": id}, 
                 success: function (data) { 
                     console.log(data);
            var proHtml = "<option value='0' selected='selected' >" + '请选择' + "</option>";
             $.each(data, function (index, value) {
              proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
             });
         $("#counties").html(proHtml);   
                 }, 
                 error: function () { 
                     alert("加载区失败"); 
                 } 
            }); 
        }    

        function updateTax(id){

     $("#province").empty(); 
     $("#city").empty();  
     $("#counties").empty(); 

    $.getJSON(adminPath+"/taxManage/querySysTaxById",{taxpayerId:id}, function(data){

    $.ajax({ 
              type: "post", 
              url: adminPath+"/area/getProvince", 
              dataType: "json",
              success: function (dataPro) {
             console.log(dataPro);
             var proHtml = '<option value="0">请选择</option>';
             $.each(dataPro, function (index, value) {              
              if(value.areaId == data.province){
                 proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
              }else{
                 proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
              }
                });
          $("#province").html(proHtml);
              }
       });
    $.ajax({ 
              type: "post", 
              url: adminPath+"/area/getCity", 
              data: {"id": data.province}, 
              success: function (dataCity) { 
               console.log(dataCity);
            var proHtml = "<option value='0' >" + '请选择' + "</option>";
             $.each(dataCity, function (index, value) {
              if(value.areaId == data.city){
                 proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
              }else{
                 proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
              }              
             });
         $("#city").html(proHtml);            

              }
     }); 
     $.ajax({ 
                  type: "post", 
                  url: adminPath+"/area/getArea", 
                  data: {"id": data.city}, 
                  success: function (dataArea) { 
                      console.log(dataArea);
             var proHtml = "<option value='0'>" + '请选择' + "</option>";
              $.each(dataArea, function (index, value) {
               if(value.areaId == data.counties){
               proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
               }else{
                  proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
               } 
              });
          $("#counties").html(proHtml);   
                  }
             });    
    
   });

}

3.表

-- Create table
create table AREA
(
  ID       NUMBER not null,
  AREAID   VARCHAR2(50),
  AREANAME VARCHAR2(60),
  PID      VARCHAR2(6),
  TYPE     NUMBER
)
tablespace USERS
  pctfree 10
  initrans 1
  maxtrans 255
  storage
  (
    initial 64
    next 1
    minextents 1
    maxextents unlimited
  );

4.思路

在页面初始化的时候把所有省分给加载到<select id="Province"></select>中；
 当用户选择某一省份的时候，再把该省份下面的所有市加载到<select id="City"></select>中；
 然后再选择某一个市再加载 该市下面的所有区县到<select id="County"></select>中；
 当用户选择的 Province 发生改变时  后面的 City 和 County  清空重新加载；

6.后台（springmvc+spring）

action

/**
 * 省市联动
 *
 */
@Controller
@RequestMapping(value = "/${adminPath}/area")
public class SysAreaAction extends BaseAction{
 @Autowired
 private SysAreaBiz sysAreaBiz;
 
 /**
  * 获取省列表
  */
 @RequestMapping(value="/getProvince")
 @ResponseBody 
    public List<AreaEntity> getProvince(){ 
       List<AreaEntity> areas=sysAreaBiz.queryAreas("",0); 
         return areas; 
 } 
 
 /**
  * 获取市列表
  */
 @RequestMapping(value="/getCity")
 @ResponseBody 
    public List<AreaEntity> getCity(@RequestParam(value="id") String id){ 
       List<AreaEntity> areas=sysAreaBiz.queryAreas(id,1); 
         return areas; 
 } 
 
 /**
  * 获取县/区列表
  */
 @RequestMapping(value="/getArea")
 @ResponseBody 
    public List<AreaEntity> getArea(@RequestParam(value="id") String id){ 
       List<AreaEntity> areas=sysAreaBiz.queryAreas(id,2); 
         return areas; 
 } 

 

daoimpl

public List<AreaEntity> queryAreas(String pid, int type) {
  String sql = "select a.* from tax_area a";
  sql+= " where a.type="+ type; 
  if(StringUtils.isNotEmpty(pid)){
   sql+= " and a.pid = '"+pid+"' ";
  }
  
  return  this.jdbcTemplateOrcl.query(sql, new SysAreaRowMapper());
 }

碰到问题：

shiroFilter 中加入只检查登录验证，不检查权限验证的地址 ：

  <property name="filters">
            <map>
                <entry key="authc">
                    <bean class="com.junxiao.xsoft.base.shiro.ShiroAuthc">
                     <!-- 只检查登录验证，不检查权限验证的地址 -->
                     <property name="URIOK">
                <set>

                     中加入 
                     <value>/${adminPath}/area</value>

               </set>
            </property>
                    </bean>
                </entry>
            </map>
        </property>