ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动

技术点：jdbc操作数据库，ajax提交，字符拦截器，三级联动

特点：局部刷新达到省市区三级联动，举一反三可以做商品分类等

宗旨：从实战中学习

博客讲解是按照两级联动，但下载的资源是三级联动含sql文件。

效果图：

首页核心代码：

1. <%
2. List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces();
3. pageContext.setAttribute("provinces", maps);
4. %>
5. <fieldset>
6. <legend>省市区三级联动</legend>
7. 省份:
8. <select id="province" onchange="select_citys(this)">
9. <option value="">-请选择-</option>
10. <!-- 循环显示所有省份 -->
11. <c:forEach var="pv" items="${provinces}">
12. <option value="${pv.id}">${pv.name}</option>
13. </c:forEach>
14. </select>
15. 城市:
16. <select id="city" onchange="select_areas(this)">
17. <option value="">-请选择-</option>
18. </select>
19. 区域:
20. <select id="area">
21. <option value="">-请选择-</option>
22. </select>
23. </fieldset>

ajax代码：

1. function select_citys(obj){
2. var provinceId = $(obj).val();
3. if(!provinceId)return; // 声明变量就要判断是否为null
4. $.ajax({
5. type:"post",//请求方式get/post
6. url:"${ctx}/CityServlet",//请求对应的地址
7. data:{"provinceId":provinceId},//往服务器传递的参数，
8. success:function(data){//服务器交互成功调用的回调函数，data就是服务器端传递出来的数据
9. var jdata = data.trim(); // 去前后空格
10. if(jdata=="fail"){
11. alert("查询失败!");
12. }else{
13. var jsonData = eval(jdata);//将字符串的json对象转换成json
14. $("#area").html("<option>-请选择-</option>");
15. append_template(jsonData,"city");
16. }
17. }
18. });
19. };

20. 后台处理核心代码：

    1. protected void doPost(HttpServletRequest request,
    2. HttpServletResponse response) throws ServletException, IOException {
    3. PrintWriter out=response.getWriter();
    4. // 获取ajax请求发送过来的省份id参数
    5. String pid = request.getParameter("provinceId");
    6. if (pid != null && !pid.equals("")) {// 有变量就要进行空判断
    7. int provinceId = Integer.parseInt(pid);// 因为前端都是传String；所以要转换
    8. List<HashMap<String, Object>> citys = ConnectionUtil
    9. .findCitys(provinceId);
    10. try {
    11. // 将集合对象转换成json格式---List---JsonArr字符串[{},{},{}]
    12. out.print(JSONUtil.serialize(citys));
    13. } catch (JSONException e) {
    14. e.printStackTrace();
    15. }
    16. } else {
    17. // 查询失败
    18. out.print("fail");
    19. }
    20. }

    21. 数据库操作：

        1. package com.ajax.connection;
        2. import java.sql.Connection;
        3. import java.sql.DriverManager;
        4. import java.sql.PreparedStatement;
        5. import java.sql.ResultSet;
        6. import java.sql.SQLException;
        7. import java.sql.Statement;
        8. import java.util.ArrayList;
        9. import java.util.HashMap;
        10. import java.util.List;
        11. /**
        12. * 数据库链接，查询类
        13. * 对jdbc操作数据库不懂的可以参考：http://blog.csdn.net/qq_19558705/article/details/49947317
        14. * 以下内容就不做过多的注释了
        15. * 实际业务会采用连接池的方式，这只做学习使用
        16. * @author Administrator
        17. *
        18. */
        19. public class ConnectionUtil {
        20. private static String url = "jdbc:mysql:///test";
        21. private static String username = "root";
        22. private static String password = "root";
        23. public static Connection getConnection(){
        24. Connection connection = null;
        25. try{
        26. Class.forName("com.mysql.jdbc.Driver");
        27. connection = DriverManager.getConnection(url,username,password);
        28. return connection;
        29. }catch(Exception ex){
        30. return null;
        31. }
        32. }
        33. public static List<HashMap<String, Object>> findProvinces(){
        34. Connection connection = null;
        35. Statement statement = null;
        36. ResultSet rs = null;
        37. List<HashMap<String, Object>> maps = null;
        38. try{
        39. String sql = "SELECT id,name FROM tm_province order by sort asc";
        40. connection = getConnection();
        41. statement = connection.createStatement();
        42. rs = statement.executeQuery(sql);
        43. maps = new ArrayList<HashMap<String,Object>>();
        44. HashMap<String, Object> map = null;
        45. while(rs.next()){
        46. map = new HashMap<String, Object>();
        47. map.put("id", rs.getInt("id"));
        48. map.put("name", rs.getString("name"));
        49. maps.add(map);
        50. }
        51. return maps;
        52. }catch(SQLException sql){
        53. sql.printStackTrace();
        54. return null;
        55. }finally{
        56. try{
        57. if(rs!=null)rs.close();
        58. if(statement!=null)statement.close();
        59. if(connection!=null)connection.close();
        60. }catch(SQLException sql){
        61. sql.printStackTrace();
        62. }
        63. }
        64. }
        65. //后面内容省略，可以免费下载资源
        66. }

        字符拦截器：

        1. package com.ajax.filter;
        2. import java.io.IOException;
        3. import javax.servlet.Filter;
        4. import javax.servlet.FilterChain;
        5. import javax.servlet.FilterConfig;
        6. import javax.servlet.ServletException;
        7. import javax.servlet.ServletRequest;
        8. import javax.servlet.ServletResponse;
        9. import javax.servlet.http.HttpServletRequest;
        10. import javax.servlet.http.HttpServletResponse;
        11. /**
        12. * 如果不清楚字符拦截器可以参考：http://blog.csdn.net/qq_19558705/article/details/49962153
        13. * @author Administrator
        14. *
        15. */
        16. public class CharacterFilter implements Filter {
        17. private FilterConfig config;
        18. public void doFilter(ServletRequest req, ServletResponse resp,
        19. FilterChain chain) throws IOException, ServletException {
        20. HttpServletRequest request = (HttpServletRequest) req;
        21. HttpServletResponse response = (HttpServletResponse) resp;
        22. // 从web.xml文件中获取encoding对应的init-param中的param-value
        23. String encoding = config.getInitParameter("encoding");
        24. // 只要定义了变量；就要判断是否为空；不然会报空指针异常
        25. if (encoding != null) {
        26. // 指明内容请求格式的字符编码集
        27. response.setContentType("text/html ;charset=" + encoding);
        28. // 请求时规范字符编码格式
        29. request.setCharacterEncoding(encoding);
        30. // 指明输出的格式字符编码集
        31. response.setCharacterEncoding(encoding);
        32. }
        33. // 进入下一个拦截器
        34. chain.doFilter(request, response);
        35. }
        36. // FilterConfig 是拦截器的全局变量
        37. public void init(FilterConfig config) throws ServletException {
        38. this.config = config;
        39. }
        40. public void destroy() {
        41. }
        42. }