ajax省市区三级联动

时间:2022-07-16 11:37:24

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

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

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

宗旨:从实战中学习

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

效果图:

ajax省市区三级联动

首页核心代码:

 

[html]  view plain  copy
 
 ajax省市区三级联动ajax省市区三级联动
  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
 
 ajax省市区三级联动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. 后台处理核心代码:

     

    [java]  view plain  copy
     
     ajax省市区三级联动ajax省市区三级联动
    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
       
       ajax省市区三级联动ajax省市区三级联动
      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
       
       ajax省市区三级联动ajax省市区三级联动
      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. }