JSON实现省市联动

JSONLIB 转换JSON数据:

• JSONArray :将数组或List集合转成JSON.
• JSONObject :将对象或Map集合转成JSON.

---

新增三个包：

---

1.查询省份

JsonProvinceServlet:

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        try {
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            JqProvinceCityService jqProvinceCityService = new JqProvinceCityService();
            List<Province> list = jqProvinceCityService.findProvince();
            request.setAttribute("list", list);
            request.getRequestDispatcher("/Json_province_city/JSON_province_city.jsp").forward(request, response);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request,response);
    }

2.查询城市

JsonCityServlet:

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        try {
            String pid = request.getParameter("pid");
            JqProvinceCityService jqProvinceCityService = new JqProvinceCityService();
            List<City> list = jqProvinceCityService.findCity(pid);

            //将list集合转换为json
            JsonConfig jsonConfig = new JsonConfig();
            jsonConfig.setExcludes(new String[] {"pid"});//去掉pid
            JSONArray jsonArray = JSONArray.fromObject(list,jsonConfig);
            System.out.println(jsonArray.toString());

            response.getWriter().print(jsonArray.toString());

        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request,response);
    }

Service:

/**
     * 寻找省份
     * @return
     * @throws SQLException
     */
    public List<Province> findProvince() throws SQLException {
        JqProvinceCityDao jqProvinceCityDao = new JqProvinceCityDao();
        return jqProvinceCityDao.findProvince();
    }

    /**
     * 根据pid查找城市
     * @param pid
     * @return
     * @throws SQLException 
     */
    public List<City> findCity(String pid) throws SQLException {
        JqProvinceCityDao jqProvinceCityDao = new JqProvinceCityDao();
        return jqProvinceCityDao.findCity(pid);
    }

Dao:

/**
     * 寻找省份
     * @return
     * @throws SQLException
     */
    public List<Province> findProvince() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());
        String sql = "select * from province";
        List<Province> list = queryRunner.query(sql, new BeanListHandler<Province>(Province.class));
        return list;
    }

    /**
     * 寻找城市
     * @param pid
     * @return
     * @throws SQLException
     */
    public List<City> findCity(String pid) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());
        String sql = "select * from city where pid = ?";
        List<City> list = queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);
        return list;
    }

Json_province_city.jsp:

<!-- 兄弟，一定要先导Jquery的包啊！再导自己写的script函数！顺序不能反了！ -->
        <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="/WebTest/Json_province_city/JSON_province_city.js"></script>


<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>

Json_province_city.js:

$(function() {
    //为省份下拉列表绑定事件
    $("#province").change(function() {
        //获得省份id;
        var pid = $(this).val();
        $.post("/WebTest/JsonCityServlet",{"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")
    })
});