jquery ajax(2)—–獲取省市縣/區三級聯動（1）

1.jsp 頁面的jquery ajax：注意要引入jquery.min.js

<script>
  $(function () {
        $("#provSelect").change(function () {
            var selValue=$("select option:selected").val();
            $("#citySelect option:not(:first)").remove();
            $("#distSelect option:not(:first)").remove();
            $.ajax({
                url:"/region/city",
                type:"post",
                dataType:"text",
                data:"provinceId="+selValue,
                success:function (data) {
                    var obj=eval(data);
                    $.each(obj,function (index,item) {
                       // alert(obj[index].id);
   $("#citySelect").append("<option value='"+obj[index].id+"'>"
   +obj[index].regionName+"</option>");
                    })
                } 
            }) 
        })

        $("#citySelect").change(function () {
            var cityId=$("#citySelect option:selected").val();
            alert("cityId=="+cityId);
            $("#distSelect option:not(:first)").remove();
            $.ajax({
               url:"/region/district",
                type:"post",
                dataType:"text",
                data:"cityId="+cityId,
                success:function (data) {
                    var districtJson=eval(data); 
                    $.each(districtJson,function (index,item) {
                        $("#distSelect").append("<option>"+
                        districtJson[index].regionName+"</option>");
                    })
                }
            })
        })
    })
 </script>
 

2.jsp頁面如下：

 <li>
 <select id="provSelect" class="on">
  <option name="prov_9999" value="9999">請選擇省份...</option>
  <c:forEach items="${province}" var="pro">
<option name="prov_34" id="pro_id" value="${pro.id}">${pro.regionName}</option>
      </c:forEach>
   </select>
  </li>

<li id="citySelectArea" style="">
  <select id="citySelect">
<option selected="selected" name="city_244" value="244">請選擇城市</option>
       <%--<c:forEach items="${city}" var="city">
         <option name="city_245" value="245">${city.regionType}</option>
       </c:forEach>--%>
   </select>
</li>
<li id="distSelectArea">
     <select id="distSelect">
       <option name="dist_9999" value="9999" >請選擇地區/縣</option> 
     </select>
 </li>
 

3.springMVC 後臺controller 關鍵加@ResponseBody：

/*獲取省份*/
@RequestMapping("/province")
@ResponseBody
public void findProvince(Model model){
    int regionType=1;
    List<Region> regionList=regionService.findByParentId(1);
    model.addAttribute("region",regionList); 
}

/*（2）獲取城市*/
@RequestMapping("/city")
@ResponseBody 
public List<Region> findCity(@Param("city")String city, Model model){
    //  int regionType=3;
    System.out.println("controller city=="+city);
    int regionType=Integer.parseInt(city);
    List<Region> regionList=regionService.findByParentId(regionType);
    model.addAttribute("city",regionList); 
    return regionList;
}

/*獲取區/縣*/
@RequestMapping("/district")
@ResponseBody
public List<Region> findDistrict(@Param("cityId")String cityId, Model model){ 
    int regionType=Integer.parseInt(cityId);
    List<Region> regionList=regionService.findByParentId(regionType); 
    return regionList;
}
 

4.Region實體類:

@Entity
@Table(name = "region")
public class Region {

@Id
@GeneratedValue
@Column(name = "region_id")
private long id;

@Column(name = "parent_id")
private int parentId;

@Column(name = "region_name")
private String regionName;

@Column(name = "region_type")
private int regionType;
 setter、getter此處省略...
 }