AJAX应用案例--基于mysql,以POST方式,完成三级级下拉联动【省份-城市-区域】

AJAX应用案例--基于mysql,以POST方式,用DOM对象,完成三级级下拉联动【省份-城市-区域】,效果图如下:

AJAX应用案例--基于mysql,以POST方式,完成三级级下拉联动【省份-城市-区域】_第1张图片


数据库如下:

省份                                               城市                                                                                       区域

AJAX应用案例--基于mysql,以POST方式,完成三级级下拉联动【省份-城市-区域】_第2张图片AJAX应用案例--基于mysql,以POST方式,完成三级级下拉联动【省份-城市-区域】_第3张图片


Jsp页面代码:

<%@ page language="java" pageEncoding="UTF-8"%>


  
  	
  	
  	
  	
  	
  	
  	
  	
  


servlet代码:

package kerwin.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kerwin.bean.Area;
import kerwin.bean.City;
import kerwin.service.ProvinceCityAreaService;
import net.sf.json.JSONArray;
import net.sf.json.JsonConfig;

public class ProvinceCityAreaServlet extends HttpServlet {
	
	ProvinceCityAreaService service = new ProvinceCityAreaService();
	
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		String method = request.getParameter("method");
		if("provinceToCity".equals(method)){
			this.ProvinceToCity(request, response);
		}else if("cityToArea".equals(method)){
			this.cityToArea(request, response);
		}
		
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
	
	public void ProvinceToCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		List citys = null;
		//获取参数
		String pid = request.getParameter("provinceId");
		try {
			
			citys = service.findAllCityByProvince(pid);	
			
			//使用第三方工具类,将对象转成JSON格式的字符串
			JsonConfig config = new JsonConfig();
			//去掉不需要的参数
			//config.setExcludes(new String[]{"id"});
			//将citys转换为json格式的字符串
			JSONArray jsonArray = JSONArray.fromObject(citys, config);
			String jsonJavaStr = jsonArray.toString();
			
			//将字符串响应给ajax引擎
			out.write(jsonJavaStr);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	public void cityToArea(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		List areas = null;
		//获取参数
		String cid = request.getParameter("cid");
		try {
			
			areas = service.findAllAreaByProvince(cid);	
			
			//使用第三方工具类,将对象转成JSON格式的字符串
			JsonConfig config = new JsonConfig();
			//去掉不需要的参数
			config.setExcludes(new String[]{"id"});
			//将citys转换为json格式的字符串
			JSONArray jsonArray = JSONArray.fromObject(areas, config);
			String jsonJavaStr = jsonArray.toString();
			
			//将字符串响应给ajax引擎
			out.write(jsonJavaStr);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

service层代码:省略.....


DAO层代码:

package kerwin.dao;

import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import kerwin.bean.Area;
import kerwin.bean.City;
import kerwin.utils.JdbcUtil;

public class ProvinceCityAreaDao{
	public List findAllCityByProvince(String pid)  throws Exception{
		List citys = null;
		QueryRunner runner = new QueryRunner(JdbcUtil.dataSource);
		
		String sql = "select * from citys where pid = ?";
		Object params[]={pid};
		
		citys = runner.query(sql, new BeanListHandler(City.class), params);
		
		return citys;
		
	}
	
	
	public List findAllAreaByProvince(String cid)  throws Exception{
		List areas = null;
		QueryRunner runner = new QueryRunner(JdbcUtil.dataSource);
		
		String sql = "select * from area where cid = ?";
		Object params[]={cid};
		
		areas = runner.query(sql, new BeanListHandler(Area.class), params);
		
		return areas;
		
	}
	
	
}

还有三个province、city、area JavaBean类省略......


mysql连接使用c3p0连接池:

c3p0-config.xml:



	
		com.mysql.jdbc.Driver
		jdbc:mysql://127.0.0.1:3306/ajax
		root
		root
		2
		5
		1
		5
	




JdbcUtil.java:

package kerwin.utils;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class JdbcUtil {
	public static ComboPooledDataSource dataSource = new ComboPooledDataSource();

	public static ComboPooledDataSource getDataSource() {
		return dataSource;
	}
	
}





你可能感兴趣的:(ajax,dom,ajax,异步,javascript,三级联动)