ajax省市区三级联动

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

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

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

宗旨：从实战中学习

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

效果图：

首页核心代码：

[html] view plain copy

<%
List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces();
pageContext.setAttribute("provinces", maps);
%>
<fieldset>
<legend>省市区三级联动</legend>
省份:
<select id="province" onchange="select_citys(this)">
<option value="">-请选择-</option>
<c:forEach var="pv" items="${provinces}">
<option value="${pv.id}">${pv.name}</option>
</c:forEach>
</select>
城市:
<select id="city" onchange="select_areas(this)">
<option value="">-请选择-</option>
</select>
区域:
<select id="area">
<option value="">-请选择-</option>
</select>
</fieldset>

ajax代码：

[html] view plain copy

function select_citys(obj){
var provinceId = $(obj).val();
if(!provinceId)return; // 声明变量就要判断是否为null
$.ajax({
type:"post",//请求方式get/post
url:"${ctx}/CityServlet",//请求对应的地址
data:{"provinceId":provinceId},//往服务器传递的参数，
success:function(data){//服务器交互成功调用的回调函数，data就是服务器端传递出来的数据
var jdata = data.trim(); // 去前后空格
if(jdata=="fail"){
alert("查询失败!");
}else{
var jsonData = eval(jdata);//将字符串的json对象转换成json
$("#area").html("<option>-请选择-</option>");
append_template(jsonData,"city");
}
}
});
};
后台处理核心代码：
[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;
  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;
  13. /**
  14. * 数据库链接，查询类
  15. * 对jdbc操作数据库不懂的可以参考：http://blog.csdn.net/qq_19558705/article/details/49947317
  16. * 以下内容就不做过多的注释了
  17. * 实际业务会采用连接池的方式，这只做学习使用
  18. * @author Administrator
  19. *
  20. */
  21. public class ConnectionUtil {
  23. private static String url = "jdbc:mysql:///test";
  24. private static String username = "root";
  25. private static String password = "root";
  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. }
  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. }
  71. //后面内容省略，可以免费下载资源
  73. }
  字符拦截器：
  [java] view plain copy
  1. package com.ajax.filter;
  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;
  13. /**
  14. * 如果不清楚字符拦截器可以参考：http://blog.csdn.net/qq_19558705/article/details/49962153
  15. * @author Administrator
  16. *
  17. */
  18. public class CharacterFilter implements Filter {
  20. private FilterConfig config;
  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. }

posted on 2016-12-21 01:51 早晨de风景阅读(1527) 评论(0) 编辑收藏举报

刷新页面返回顶部

ajax省市区三级联动

导航

公告