ajax完成省市联动

Posted 2020-09-21 司机刹一脚

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");
    });
});