ajax省市区三级联动

2022-09-15 13:19:22

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

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

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

宗旨：从实战中学习

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

效果图：

首页核心代码：

<%
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代码：

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");
}
}
});
};
后台处理核心代码：
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. 数据库操作：
  1. package com.ajax.connection;
  2. import java.sql.Connection;
  3. import java.sql.DriverManager;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.sql.Statement;
  8. import java.util.ArrayList;
  9. import java.util.HashMap;
  10. import java.util.List;
  11. /**
  12. * 数据库链接，查询类
  13. * 对jdbc操作数据库不懂的可以参考：http://blog.csdn.net/qq_19558705/article/details/49947317
  14. * 以下内容就不做过多的注释了
  15. * 实际业务会采用连接池的方式，这只做学习使用
  16. * @author Administrator
  17. *
  18. */
  19. public class ConnectionUtil {
  20. private static String url = "jdbc:mysql:///test";
  21. private static String username = "root";
  22. private static String password = "root";
  23. public static Connection getConnection(){
  24. Connection connection = null;
  25. try{
  26. Class.forName("com.mysql.jdbc.Driver");
  27. connection = DriverManager.getConnection(url,username,password);
  28. return connection;
  29. }catch(Exception ex){
  30. return null;
  31. }
  32. }
  33. public static List<HashMap<String, Object>> findProvinces(){
  34. Connection connection = null;
  35. Statement statement = null;
  36. ResultSet rs = null;
  37. List<HashMap<String, Object>> maps = null;
  38. try{
  39. String sql = "SELECT id,name FROM tm_province order by sort asc";
  40. connection = getConnection();
  41. statement = connection.createStatement();
  42. rs = statement.executeQuery(sql);
  43. maps = new ArrayList<HashMap<String,Object>>();
  44. HashMap<String, Object> map = null;
  45. while(rs.next()){
  46. map = new HashMap<String, Object>();
  47. map.put("id", rs.getInt("id"));
  48. map.put("name", rs.getString("name"));
  49. maps.add(map);
  50. }
  51. return maps;
  52. }catch(SQLException sql){
  53. sql.printStackTrace();
  54. return null;
  55. }finally{
  56. try{
  57. if(rs!=null)rs.close();
  58. if(statement!=null)statement.close();
  59. if(connection!=null)connection.close();
  60. }catch(SQLException sql){
  61. sql.printStackTrace();
  62. }
  63. }
  64. }
  65. //后面内容省略，可以免费下载资源
  66. }
  字符拦截器：
  1. package com.ajax.filter;
  2. import java.io.IOException;
  3. import javax.servlet.Filter;
  4. import javax.servlet.FilterChain;
  5. import javax.servlet.FilterConfig;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.ServletRequest;
  8. import javax.servlet.ServletResponse;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. /**
  12. * 如果不清楚字符拦截器可以参考：http://blog.csdn.net/qq_19558705/article/details/49962153
  13. * @author Administrator
  14. *
  15. */
  16. public class CharacterFilter implements Filter {
  17. private FilterConfig config;
  18. public void doFilter(ServletRequest req, ServletResponse resp,
  19. FilterChain chain) throws IOException, ServletException {
  20. HttpServletRequest request = (HttpServletRequest) req;
  21. HttpServletResponse response = (HttpServletResponse) resp;
  22. // 从web.xml文件中获取encoding对应的init-param中的param-value
  23. String encoding = config.getInitParameter("encoding");
  24. // 只要定义了变量；就要判断是否为空；不然会报空指针异常
  25. if (encoding != null) {
  26. // 指明内容请求格式的字符编码集
  27. response.setContentType("text/html ;charset=" + encoding);
  28. // 请求时规范字符编码格式
  29. request.setCharacterEncoding(encoding);
  30. // 指明输出的格式字符编码集
  31. response.setCharacterEncoding(encoding);
  32. }
  33. // 进入下一个拦截器
  34. chain.doFilter(request, response);
  35. }
  36. // FilterConfig 是拦截器的全局变量
  37. public void init(FilterConfig config) throws ServletException {
  38. this.config = config;
  39. }
  40. public void destroy() {
  41. }
  42. }

码农公寓

相关文章