JQ完成省市联动的案例（返回Json）-原创手记-慕课网

0， JSON语法

举个例子：使用JSON表示省市的结构:

{“id”:1,”name”:”广州”,”pid”:1} 代表了一个城市的信息

[

{“id”:1,”name”:”广州”,”pid”:1},

{“id”:2,”name”:”深圳”,”pid”:1}

1，设计页面

</head>
<body>
省份:
<select id="province">
    <option value="">-请选择-</option>
    <option value="1">广东省</option>
    <option value="2">湖南省</option>
    <option value="3">湖北省</option>
    <option value="4">河南省</option>
</select>
城市：
<select id="city">
    <option value="">-请选择-</option>
</select>
</body>

2，编写Servlet

public class CityServlet2 extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 接收参数:
            int pid = Integer.parseInt(request.getParameter("pid"));
            // 调用业务层:
            CityService cityService = new CityService();
            List<City> list = cityService.findByPid(pid);
            // 将list集合转成JSON:
            // jsonlib , fastjson.
            /**
             * jsonlib的API中提供了两个类
             * JsonArray    :用于将数组或list集合转成json
             * JsonObject   :用于将Object或map集合转成json
             */
            // 去掉某些无关的属性:
            JsonConfig jsonConfig = new JsonConfig();
            jsonConfig.setExcludes(new String[]{"pid"});

            JSONArray jsonArray = JSONArray.fromObject(list,jsonConfig);
            System.out.println(jsonArray.toString());

            // 响应数据到页面：
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().println(jsonArray.toString());
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

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

3，编写JS

$(function(){
    // 为第一个下拉列表添加事件:
    $("#province").change(function(){
        // 获得选中省份的值：
        var val = $(this).val();
        // 异步发送请求:
        $.post("/day16/CityServlet2",{"pid":val},function(data){
            // js直接将json识别为数组格式。
            // 获得市的下拉列表:
            var city = $("#city");
            city.html("<option value=''>-请选择-</option>");
            $(data).each(function(i,n){
                city.append("<option value='"+n.id+"'>"+n.name+"</option>");
            });
        },"json");
    });
});