級聯下拉列表 ajax實現（兩種方式）
阿新 • • 發佈：2019-02-20
案例：設定一個級聯下拉列表，省市區，根據id進行查詢，同屬於同一個省的城市前兩位id相同，屬於同一個市的區前4位id相同
資料庫資料如下（部分）：
第一種方式：通過獲取json物件，然後進行解析json物件陣列，動態建立下拉列表
1：Dao程式碼如下：
2：在servlet中獲取城市的id，返回該id下屬的市或者區，servlet程式碼如下，呼叫dao中方法：package com.oracle.dao; import java.util.List; import com.oracle.jdbc.util.Dao; import com.oracle.vo.City; public class CityDaoImpl implements CityDao { //第一種方式的方法，通過id+兩位佔位符獲取 物件，id可以為空 @Override public List<City> getCity(String id) { String sql="select id,name from city where id like'"+id+"__'"; return Dao.query(sql,City.class); } //第二種方式的方法，獲取物件存到list，迴圈取出 連線成html程式碼形式的字串 @Override public String getCities(String id) { StringBuffer sb=new StringBuffer(); List<City>list=Dao.query("select id,name from city where id like'"+id+"__'",City.class); for(City l:list){ sb.append("<option value='"+l.getId()+"'>"+l.getName()+"</option>"); } return sb.toString(); } }
3.在jsp檔案中編寫ajax程式碼，實現傳id返資料，程式碼如下protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //獲取id值 String code=request.getParameter("code"); //設定編碼 request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); //利用工廠建立dao物件,並呼叫dao方法 CityDao dao=ServiceFactory.getObject(CityDaoImpl.class); List<City>list=dao.getCity(code); //通過jackson包的方法，將list物件轉成jason物件，傳回jsp中 ObjectMapper mapper=new ObjectMapper(); String json=mapper.writeValueAsString(list); response.getWriter().append(json); }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="js/jquery-1.11.1.js"></script> <script> $(function(){ //初始入口函式 //初始傳入空字串，自動查出id為兩位的資料，都為省或直轄市 $.post("city.do",{code:""},function(data){ //迴圈插入在select中 for(var i=0;i<data.length;i++){ $("#province").append($("<option>").val(data[i].id).html(data[i].name)); } $("#province").change(); },"json") //設定省change函式 $("#province").change(function(){ $.post("city.do",{code:$(this).val()},function(data){ $("#city").empty();//置空 for(var i=0;i<data.length;i++){ $("#city").append($("<option>").val(data[i].id).html(data[i].name)); } $("#city").change(); },"json") }); //設定市change函式 $("#city").change(function(){ $.post("city.do",{code:$(this).val()},function(data){ $("#area").empty();//置空 for(var i=0;i<data.length;i++){ $("#area").append($("<option>").val(data[i].id).html(data[i].name)); } },"json") }); }); </script> </head> <body> <select style="width:150px" id="province"></select>省 <select style="width:150px" id="city"></select>市 <select style="width:150px" id="area"></select>區 </body> </html>
第二種方式，通過Dao裡的第二個方法，返回html程式碼形式的 list物件，直接設定在select的html中，可自動生成下拉選單，級聯更新子列表操作同上，不做過多解釋
1：servlet,程式碼如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//取id
String id=request.getParameter("code");
//置編碼
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
//呼叫dao物件的第二個方法，返回htm程式碼字串
CityDao dao=ServiceFactory.getObject(CityDaoImpl.class);
String str=dao.getCities(id);
response.getWriter().append(str);
}2：jsp程式碼如下（只有script部分，其他部分同第一個方法相同）：
<script>
$(function(){
$.post("city2.do",{code:""},function(data){
$("#province").html(data);
$("#province").change();
})
$("#province").change(function(data){
$.post("city2.do",{code:$(this).val()},function(data){
$("#city").html(data);
})
$("#city").change();
});
$("#city").change(function(data){
$.post("city2.do",{code:$(this).val()},function(data){
$("#area").html(data);
})
});
});
</script>以上兩種方式都可以很好的實現級聯下拉列表的功能，作為自己的學習記錄，同時歡迎大家指出錯誤和可以更好改進的地方，大家一起共同進步~