ajax省市区三级联动

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

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

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

宗旨：从实战中学习

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

效果图：

首页核心代码：

<%
    		List> maps = ConnectionUtil.findProvinces();
    		pageContext.setAttribute("provinces", maps);
    	%>
    	
    	

    		
省市区三级联动
    			省份:
		    	
		    		-请选择-
		    		
		    		
			    		${pv.name}
		    		
		    	
		    	城市:
		    	
		    		-请选择-
		    	
		    	区域:
		    	
		    		-请选择-
		    	
    	

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("-请选择-");
						append_template(jsonData,"city");
					}
				}
			});
		};

后台处理核心代码：

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> 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> findProvinces(){
		Connection connection = null;
		Statement statement = null;
		ResultSet rs = null;
		List> 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 map = null;
			while(rs.next()){
				map = new HashMap();
				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/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

jsp的jstl和el表达式：

c是核心的意思。

赋值：

循环：
${pv.name}
 

详细资料：http://blog.csdn.net/qq_19558705/article/details/49908595

资源下载路径：http://download.csdn.net/detail/qq_19558705/9362549

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

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

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