html5 省市区三级联查 ajax省市区三级联动的思路

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

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

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

宗旨：从实战中学习

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

效果图：

首页核心代码：

 

[html] 
1. <%  
2. <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] 
1. function select_citys(obj){  
2. 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. jdata = data.trim(); // 去前后空格  
10. jdata=="fail"){  
11.                         alert("查询失败!");  
12.                     }else{  
13. jsonData = eval（jdata);//将字符串的json对象转换成json  
14. <option>-请选择-</option>");  
15.                         append_template(jsonData,"city");  
16.                     }  
17.                 }  
18.             });  
19.         };

2. 后台处理核心代码：

2. [java]
1. protected void doPost(HttpServletRequest request,  
2. throws ServletException, IOException {  
3.         PrintWriter out=response.getWriter();  
4. // 获取ajax请求发送过来的省份id参数  
5. "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. "fail");  
19.         }  
20.     }  
21.

2. 数据库操作：

2. [java]
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操作数据库不懂的可以参考： 
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. null;  
29. try{  
30. "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. null;  
40. null;  
41. null;  
42. null;  
43. try{  
44. "SELECT id,name FROM tm_province order by sort asc";  
45.             connection = getConnection();  
46.             statement = connection.createStatement();  
47.             rs = statement.executeQuery(sql);  
48. new ArrayList<HashMap<String,Object>>();  
49. null;  
50. while(rs.next()){  
51. new HashMap<String, Object>();  
52. "id", rs.getInt("id"));  
53. "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. }  
74.

2. 字符拦截器：

[java] 
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.  * 如果不清楚字符拦截器可以参考： 
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. throws IOException, ServletException {  
24.         HttpServletRequest request = (HttpServletRequest) req;  
25.         HttpServletResponse response = (HttpServletResponse) resp;  
26. // 从web.xml文件中获取encoding对应的init-param中的param-value  
27. "encoding");  
28. // 只要定义了变量；就要判断是否为空；不然会报空指针异常  
29. if (encoding != null) {  
30. // 指明内容请求格式的字符编码集  
31. "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. }  
47.