使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

try {
//通过名字获得所有值
String sql = "select c.city_place from city c ,"
+ "province p where c.province_id = "
+ " (select id from province where place = '"+ name +"') "
+ " and c.province_id = p.id";
conn = ConnectionFactory.getConnection();
pstmt = conn.prepareStatement(sql);
citys = new ArrayList<City>();
System.out.println(sql);
rs = pstmt.executeQuery();

while(rs.next()){
City city = new City();
city.setPlace(rs.getString(1));
citys.add(city);
}
System.out.println(citys);

} catch (SQLException e) {
e.printStackTrace();
}

return citys;
}

将查询到的数据发送到后台，后台接收到数据后将其转换为Json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，而不用各种跳转页面，这就是Ajax(Asynchronous Javascript And XML),

protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("application/json;charset=utf-8");
  response.setCharacterEncoding("utf-8");
  request.setCharacterEncoding("utf-8");
//  String proName = "浙江";
  String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),
    "utf-8");
  ArrayList<City> citys= new Place().findAllCityByPro(proName);
  PrintWriter out = response.getWriter();
  out.write(JSONArray.fromObject(citys).toString()); 
 } 

至于显示页面的代码也在前面写到jQuery语句中了

效果如下：

以上这篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。