JSON--实现省市联动

JSON 举例实现省市联动

配置

在使用前需要配置一下JSON才能使用,这里使用jar包配置

JSON的基本用法

数字不加引号,布尔值不加引号

var student={"name":"三毛","sex":"男","age":20,"contact":{"phone":"13153288888","email":"sunshouyu@wanmait.com"}};
    console.log(student.name);
    console.log(student); 
    
var student2={"name":"四毛","sex":"男","age":22,"contact":null,"hasGirl":true};
var students=[{"name":"三毛","sex":"男","age":20,"contact":{"phone":"13153288888","email":"sunshouyu@wanmait.com"}},
        {"name":"四毛","sex":"男","age":22}];
    console.log(students[1].name);
    console.log(student.contact.email);

省市联动 – JSON实现

JSP代码

<select id="province">
    <c:forEach items="${requestScope.provinces}" var="province">
        <option value="${province.id}">${province.title}</option>
    </c:forEach>
</select>

<select id="city"></select>
<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
    initCity();
    $("#province").change(initCity);
});
function initCity(){
    var provinceId = $("#province").val();
    //清空下拉项
    $("#city").empty();

//ajax json 的两种写法:
/*    $.ajax({
        url:"<%=path%>/webservlet/ProvinceWebServlet?action=findCitiesByProvince",
        data:{provinceId:provinceId},
        dataType:"json",
        success:function (cities) {
            for(var i=0;i<cities.length;i++)
            {
                $("#city").append("<option value=\""+cities[i].id+"\">"+cities[i].title+"</option>");
            }
        }
    });*/
    
    //第二种
    $.getJSON("<%=path%>/webservlet/ProvinceWebServlet?action=findCitiesByProvince",
        {provinceId:provinceId},
        function (cities) {
            for(var i=0;i<cities.length;i++)
            {
                $("#city").append("<option value=\""+cities[i].id+"\">"+cities[i].title+"</option>");
            }
    })
}

Servlet代码

@WebServlet(name = "ProvinceWebServlet",value = "/webservlet/ProvinceWebServlet")
public class ProvinceWebServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");
        if("findAll".equals(action))
        {
            this.findAll(request,response);
        }
        else if("findCitiesByProvince".equals(action))
        {
            this.findCitiesByProvince(request,response);
        }

    }
    protected void findCitiesByProvince(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Integer provinceId = Integer.parseInt(request.getParameter("provinceId"));
        List<City> cities = CityDAO.getDao().findAllByProvince(provinceId);
        JsonConfig config = new JsonConfig();
        //设置排除哪些属性，这些属性不解析成json
        config.setExcludes(new String[]{"sort","province","enable"});
        //解析
        JSONArray arr = JSONArray.fromObject(cities,config);
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(arr);
        out.close();

    }
    protected void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Province> provinces = ProvinceDAO.getDao().findAll();
        request.setAttribute("provinces",provinces);
        this.getServletContext().getRequestDispatcher("/json.jsp").forward(request,response);
    }
    }

DAO代码

cityDAO

 public List<City> findAllByProvince(Integer provinceId)
    {
        List<City> cities = new ArrayList<>();
        City city = null;
        String sql = "select * from city where enable=1 and provinceId=? order by sort desc";
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            conn = DBHelper.getHelper().getConn();
            ps = conn.prepareStatement(sql);
            ps.setInt(1,provinceId);
            rs = ps.executeQuery();
            Province province = null;
            while(rs.next())
            {
                city = new City(rs.getInt("id"),
                        rs.getString("title"),
                        rs.getInt("sort"),
                        true);
                province = new Province();
                province.setId(rs.getInt("provinceId"));
                city.setProvince(province);
                cities.add(city);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBHelper.getHelper().close(rs,ps,conn);
        }
        return cities;
    }

provinceDAO

public List<Province> findAll() {
        List<Province> provinces = new ArrayList<>();
        Province province = null;
        String sql = "select * from province where enable=1 order by sort desc";
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            conn = DBHelper.getHelper().getConn();
            ps = conn.prepareStatement(sql);

            rs = ps.executeQuery();
            while(rs.next())
            {
              province = new Province(rs.getInt("id"),
                      rs.getString("title"),
                      rs.getInt("sort"),
                      true);

              provinces.add(province);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBHelper.getHelper().close(rs,ps,conn);
        }
        return provinces;
    }

测试类

public class CityDAOTest {
    @Test
    public void testFindAll()
    {
        List<City> cities = CityDAO.getDao().findAllByProvince(1);
        //[{},{}]
        //JSON.lib
        JSONArray arr = JSONArray.fromObject(cities);
        System.out.println(arr);
        JsonConfig config = new JsonConfig();
        config.setExcludes(new String[]{"sort","province","enable"});
        arr = JSONArray.fromObject(cities,config);
        System.out.println(arr);
        System.out.println("===============================");
        City city = cities.get(0);
        JSONObject obj = JSONObject.fromObject(city,config);
        System.out.println(obj);
    }
}