ajax省市区三级联动

Love The Way You Lie 2022-08-18 11:54 293阅读 0赞

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

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

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

宗旨：从实战中学习

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

效果图：![Center][]

首页核心代码：

<%
        		List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces();
        		pageContext.setAttribute("provinces", maps);
        	%>
        	
        	<fieldset>
        		<legend>省市区三级联动</legend>
        			省份:
    		    	<select id="province" οnchange="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" οnchange="select_areas(this)">
    		    		<option value="">-请选择-</option>
    		    	</select>
    		    	区域:
    		    	<select id="area">
    		    		<option value="">-请选择-</option>
    		    	</select>
        	</fieldset>

ajax代码：

后台处理核心代码：

protected void doPost(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    		PrintWriter out=response.getWriter();
    		// 获取ajax请求发送过来的省份id参数
    		String pid = request.getParameter("provinceId");
    		if (pid != null && !pid.equals("")) {// 有变量就要进行空判断
    			int provinceId = Integer.parseInt(pid);// 因为前端都是传String；所以要转换
    			List<HashMap<String, Object>> citys = ConnectionUtil
    					.findCitys(provinceId);
    			try {
    				// 将集合对象转换成json格式---List---JsonArr字符串[{},{},{}]
    				out.print(JSONUtil.serialize(citys));
    			} catch (JSONException e) {
    				e.printStackTrace();
    			}
    		} else {
    			// 查询失败
    			out.print("fail");
    		}
    	}

数据库操作：

package com.ajax.connection;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    
    /**
     * 数据库链接，查询类
     * 对jdbc操作数据库不懂的可以参考：http://blog.csdn.net/qq_19558705/article/details/49947317
     * 以下内容就不做过多的注释了
     * 实际业务会采用连接池的方式，这只做学习使用
     * @author Administrator
     *
     */
    public class ConnectionUtil {
    
    	private static String url = "jdbc:mysql:///test";
    	private static String username = "root";
    	private static String password = "root";
    	
    	public static Connection getConnection(){
    		Connection connection = null;
    		try{
    			Class.forName("com.mysql.jdbc.Driver");
    			connection = DriverManager.getConnection(url,username,password);
    			return connection;
    		}catch(Exception ex){
    			return null;
    		}
    	}
    	
    	public static List<HashMap<String, Object>> findProvinces(){
    		Connection connection = null;
    		Statement statement = null;
    		ResultSet rs = null;
    		List<HashMap<String, Object>> maps = null;
    		try{
    			String sql = "SELECT id,name FROM tm_province order by sort asc";
    			connection = getConnection();
    			statement = connection.createStatement();
    			rs = statement.executeQuery(sql);
    			maps = new ArrayList<HashMap<String,Object>>();
    			HashMap<String, Object> map = null;
    			while(rs.next()){
    				map = new HashMap<String, Object>();
    				map.put("id", rs.getInt("id"));
    				map.put("name", rs.getString("name"));
    				maps.add(map);
    			}
    			return maps;
    		}catch(SQLException sql){
    			sql.printStackTrace();
    			return null;
    		}finally{
    			try{
    				if(rs!=null)rs.close();
    				if(statement!=null)statement.close();
    				if(connection!=null)connection.close();
    			}catch(SQLException sql){
    				sql.printStackTrace();
    			}
    		}
    	}
    	
    	//后面内容省略，可以免费下载资源
    	
    }

字符拦截器：

package com.ajax.filter;
    
    import java.io.IOException;
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 如果不清楚字符拦截器可以参考：http://blog.csdn.net/qq_19558705/article/details/49962153
     * @author Administrator
     *
     */
    public class CharacterFilter implements Filter {
    	
    	private FilterConfig config;
    	
    	public void doFilter(ServletRequest req, ServletResponse resp,
    			FilterChain chain) throws IOException, ServletException {
    		HttpServletRequest request = (HttpServletRequest) req;
    		HttpServletResponse response = (HttpServletResponse) resp;
    		// 从web.xml文件中获取encoding对应的init-param中的param-value
    		String encoding = config.getInitParameter("encoding");
    		// 只要定义了变量；就要判断是否为空；不然会报空指针异常
    		if (encoding != null) {
    			// 指明内容请求格式的字符编码集
    			response.setContentType("text/html ;charset=" + encoding);
    			// 请求时规范字符编码格式
    			request.setCharacterEncoding(encoding);
    			// 指明输出的格式字符编码集
    			response.setCharacterEncoding(encoding);
    		}
    		// 进入下一个拦截器
    		chain.doFilter(request, response);
    	}
    	// FilterConfig 是拦截器的全局变量
    	public void init(FilterConfig config) throws ServletException {
    		this.config = config;
    	}
    	public void destroy() {
    	}
    }

知识点讲解：

先从后台开始

因为jdbc操作数据库和字符拦截器有单独的博客，所有不做过多的介绍

jdbc操作数据：[http://blog.csdn.net/qq\_19558705/article/details/49947317][http_blog.csdn.net_qq_19558705_article_details_49947317]

字符拦截器：[http://blog.csdn.net/qq\_19558705/article/details/49962153][http_blog.csdn.net_qq_19558705_article_details_49962153]

servlet：

有doGet和doPost方法，get请求是通过浏览框访问，参数可见。post请求是点击访问，参数不可见

访问的路径通过@WebServlet("/CityServlet")即 项目名/CityServlet，也可以在web.xml文件中配置，具体怎么配置就不多说了。

项目名获取方法：pageContext.request.contextPath

参数获取方法：String nameValue = request.getParameter("name"); name为前端input框中的name值或者是ajax传给后台的值

打印到前端的方法：PrintWriter out=response.getWriter(); out.print("XXXX");

把值放到本页面方法：pageContext.setAttribute("值的name", 值的value);

ajax：

type：请求方式，get和post，不区分大小写

url：请求路径，这是经常出错的地方，出现404的时候要确定路径是否正确，是否添加了'/'，如果用了$\{ctx\}多半是没问题的

data：传给后台的数据，双引号的是传给后台的值的name，后面的是值的value，为了不混淆自己，都用一样的就可以了

success:function(data)\{\}：成功后返回的函数，data就是返回值，一般会有前后空格

更多参数问题可以参考：[http://blog.csdn.net/qq\_19558705/article/details/49923107][http_blog.csdn.net_qq_19558705_article_details_49923107]

jsp的jstl和el表达式：

c是核心的意思。

赋值：<c:set var="值的name" value="值的value">

循环：<c:forEach var="pv" items="$\{provinces\}">  
<option value="$\{pv.id\}">$\{pv.name\}</option>  
  </c:forEach>

详细资料：[http://blog.csdn.net/qq\_19558705/article/details/49908595][http_blog.csdn.net_qq_19558705_article_details_49908595]

资源下载路径：[http://download.csdn.net/detail/qq\_19558705/9362549][http_download.csdn.net_detail_qq_19558705_9362549]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

笔者觉得在实战中学习比盲目学习效果好很多，知道这些知识可以做什么，解决了为什么学这些知识的问题。

我总结，你来学，一起装逼一起飞。有什么疑问和建议可以留言，我会及时修改。转载请注明来源。

[Center]: /images/20220731/2c2d3a4eeb5b40479e6c43cac065b059.png
[http_blog.csdn.net_qq_19558705_article_details_49947317]: http://blog.csdn.net/qq_19558705/article/details/49947317
[http_blog.csdn.net_qq_19558705_article_details_49962153]: http://blog.csdn.net/qq_19558705/article/details/49962153
[http_blog.csdn.net_qq_19558705_article_details_49923107]: http://blog.csdn.net/qq_19558705/article/details/49923107
[http_blog.csdn.net_qq_19558705_article_details_49908595]: http://blog.csdn.net/qq_19558705/article/details/49908595
[http_download.csdn.net_detail_qq_19558705_9362549]: http://download.csdn.net/detail/qq_19558705/9362549
[http_www.itit123.cn]: http://www.itit123.cn/