ajax省市区三级联动

Posted 2020-08-24 早晨de风景

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

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

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

宗旨：从实战中学习

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

效果图：

首页核心代码：

 

[html] view plain copy

 

 

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

ajax代码：

 

[html] view plain copy

 

 

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. 后台处理核心代码：

     

    [java] view plain copy

     

     

    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. 
        
        

        数据库操作：

         

        [java] view plain copy

         

         

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

        字符拦截器：

         

        [java] view plain copy

         

         

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