ajax完成省市聯動

標籤：utf-8   final   write   四川   下拉式清單   hang   response   servlet   ems   

1.用ajax傳輸xml檔案完成省市聯動

　　首先建立資料庫

省市聯動一個province表一個city表,一對多關聯性

這是province表

pid 　　pname
1　　　　重慶
2　　　　四川

這是city表

cid 　　　　cname 　　　　pid
1　　　　　 沙坪壩區　　　　1
2　　　　　　江北區　　　　1
3　　　　　　渝中區　　　　1
4　　　　　　成都　　　　　2
5　　　　　　眉山　　　　   2
6　　　　　　樂山　　　　   2

下拉式清單的html代碼:

<tr>                            <td>籍貫</td>                            <td>                                <select id="province" name="province" >                                    <option>-請選擇-</option>                                    <c:forEach var="p" items="${list }">                                        <option value="${p.pid }">${p.pname }</option>                                    </c:forEach>                                </select>                                <select id="city" name="city">                                    <option>-請選擇-</option>                                </select>                            </td>                        </tr>

給下拉式清單綁定change事件

$(function() {    //綁定事件    $("#province").change(function(){        //擷取事件改變時傳入的pid        var pid = $(this).val();        //調用非同步        $.post("/AJAX/CityServlet",{"pid":pid},function(data) {            //擷取到市列表屬性            var $city = $("#city");            //清空列表屬性中的選項            $city.html("<option>--請選擇--</option>");            $(data).find("city").each(function(i,n){                var cid = $(this).children("cid").text();                var cname = $(this).children("cname").text();                $city.append("<option value=‘"+cid+"‘>"+cname+"</option>");            });        });    });});

從一個servlet中在資料庫擷取province資料存入域對象

private static final long serialVersionUID = 1L;    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        try {            //調用業務層            ProvinceService ps = new ProvinceService();            List<Province> list = ps.getAll();            request.setAttribute("list", list);            request.getRequestDispatcher("/regist.jsp").forward(request, response);                    } catch (SQLException e) {            e.printStackTrace();            throw new RuntimeException();        }    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request, response);    }

業務層

ProvinceDao pd = new ProvinceDao();    public List<Province> getAll() throws SQLException {        //調用dao層        List<Province> list = pd.getAll();        return list;    }

dao層

QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());    public List<Province> getAll() throws SQLException {                List<Province> list = qr.query("select * from province", new BeanListHandler<Province>(Province.class));        return list;    }

編寫非同步servlet

private static final long serialVersionUID = 1L;        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        try {            String pid = request.getParameter("pid");            ProvinceService ps = new ProvinceService();            List<City> list = ps.selectById(pid);            //將list轉換成xml檔案            XStream xs = new XStream();            //修改標籤名            xs.alias("city", City.class);                        String xmlStr = xs.toXML(list);                                    response.setContentType("text/xml;charset=utf-8");                        response.getWriter().write(xmlStr);        } catch (SQLException e) {            e.printStackTrace();        }    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request, response);    }

service層

public List<City> selectById(String pid) throws SQLException {        List<City> list = pd.selectById(pid);        return list;    }

dao層

public List<City> selectById(String pid) throws SQLException {        List<City> list = qr.query("select * from city where pid = ?", new BeanListHandler<City>(City.class), pid);        return list;    }

2.改用json傳輸非同步資料

其餘的地方不變,只需要該servlet和jq代碼
servlet代碼:

private static final long serialVersionUID = 1L;    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        try {            String pid = request.getParameter("pid");            ProvinceService ps = new ProvinceService();            List<City> list = ps.selectById(pid);            //將list集合轉成json            JsonConfig jc = new JsonConfig();            //去除不需要的欄位            jc.setExcludes(new String[]{"pid"});            //將list集合轉換成json對象            JSONArray jsonArray = JSONArray.fromObject(list, jc);            System.out.println(jsonArray);                        response.setContentType("text/html;charset=UTF-8");            //將json對象轉換成字串發出            response.getWriter().println(jsonArray.toString());                    } catch (SQLException e) {            e.printStackTrace();        }    }        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request, response);    }

jq代碼

$(function() {    //綁定事件    $("#province").change(function(){        //擷取事件改變時傳入的pid        var pid = $(this).val();        //調用非同步        $.post("/AJAX/JsonServlet",{"pid":pid},function(data) {            //擷取到市列表屬性            var $city = $("#city");            //清空列表屬性中的選項            $city.html("<option>--請選擇--</option>");            $(data).each(function(i,n){                $city.append("<option value=‘"+n.cid+"‘>"+n.cname+"</option>");            });        },"json");    });});

 

ajax完成省市聯動