码迷,mamicode.com
首页 > Web开发 > 详细

ajax完成省市联动

时间:2017-06-04 14:34:25      阅读:231      评论:0      收藏:0      [点我收藏+]

标签: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完成省市联动

标签:utf-8   final   write   四川   下拉列表   hang   response   servlet   ems   

原文地址:http://www.cnblogs.com/learnjfm/p/6940238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!