zoukankan      html  css  js  c++  java

  • ajax省市区三级联动

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

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

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

    宗旨：从实战中学习

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

    效果图：

    首页核心代码：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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
     
     在CODE上查看代码片派生到我的代码片
    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
       
       在CODE上查看代码片派生到我的代码片
      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
         
         在CODE上查看代码片派生到我的代码片
        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
         
         在CODE上查看代码片派生到我的代码片
        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. }  
  • 相关阅读:
    HTML5响应式导航
    草原图片大全
    草原psd素材
    仿堆糖图片自滚动瀑布流效果
    夏日户外风景PSD素材
    国画经典之梅花PSD素材
    更改VS的运行主窗体
    在VS中如何更换项目名称
    如何使用Visual Studio 2008(VS2008)编译C语言
    #region 私有字段
  • 原文地址：https://www.cnblogs.com/Logo-TPM/p/6206172.html
Copyright © 2011-2022 走看看