ajax之三级联动（省市县）

ajax可以实现页面的局部刷新。

浏览器创建ajax引擎对象，ajax引擎对象向服务器发送请求，服务器把响应好的数据响应给ajax引擎对象，ajax引擎对象把数据放在合适的位置。

      异步：先执行声明函数，再执行监听的响应函数      同步：顺序执行，等着响应函数。

先将基本数据导入数据库：

 

在组织实体类：

package com.bjsxt.pojo;

public class Area {
	private int areaid;
	private String areaname;
	private int parentid;
	private int arealevel;
	private int status;
	public int getAreaid() {
		return areaid;
	}
	public void setAreaid(int areaid) {
		this.areaid = areaid;
	}
	public String getAreaname() {
		return areaname;
	}
	public void setAreaname(String areaname) {
		this.areaname = areaname;
	}
	public int getParentid() {
		return parentid;
	}
	public void setParentid(int parentid) {
		this.parentid = parentid;
	}
	public int getArealevel() {
		return arealevel;
	}
	public void setArealevel(int arealevel) {
		this.arealevel = arealevel;
	}
	public int getStatus() {
		return status;
	}
	public void setStatus(int status) {
		this.status = status;
	}
	@Override
	public String toString() {
		return "Area [areaid=" + areaid + ", areaname=" + areaname
				+ ", parentid=" + parentid + ", arealevel=" + arealevel
				+ ", status=" + status + "]";
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + areaid;
		result = prime * result + arealevel;
		result = prime * result
				+ ((areaname == null) ? 0 : areaname.hashCode());
		result = prime * result + parentid;
		result = prime * result + status;
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		Area other = (Area) obj;
		if (areaid != other.areaid)
			return false;
		if (arealevel != other.arealevel)
			return false;
		if (areaname == null) {
			if (other.areaname != null)
				return false;
		} else if (!areaname.equals(other.areaname))
			return false;
		if (parentid != other.parentid)
			return false;
		if (status != other.status)
			return false;
		return true;
	}
	public Area() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Area(int areaid, String areaname, int parentid, int arealevel,
			int status) {
		super();
		this.areaid = areaid;
		this.areaname = areaname;
		this.parentid = parentid;
		this.arealevel = arealevel;
		this.status = status;
	}
	
	
	
	
}

AreaMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
	 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bjsxt.mapper.AreaMapper">
	<select id="selByp" parameterType="int" resultType="Area" >
		select * from area where parentid=#{parentid}
	</select>
</mapper>

 

AreaMapper接口：

package com.bjsxt.mapper;

import java.util.List;

import com.bjsxt.pojo.Area;

public interface AreaMapper {
	List<Area> selByp(int parentid);
}

AreaService:

package com.bjsxt.service.impl;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.bjsxt.pojo.Area;
import com.bjsxt.pojo.Data;

public interface AreaService {
	List<Area> selByp(int parentid);
	
	List<Data> selLike(@Param("title") String title);
}

 

AreaServiceImpl:

package com.bjsxt.service;

import java.util.List;

import org.apache.ibatis.session.SqlSession;

import com.bjsxt.mapper.AreaMapper;
import com.bjsxt.mapper.DataMapper;
import com.bjsxt.pojo.Area;
import com.bjsxt.pojo.Data;
import com.bjsxt.service.impl.AreaService;
import com.bjsxt.util.MyBatisUtil;

public class AreaServiceImpl implements AreaService{

	@Override
	public List<Area> selByp(int parentid){
		SqlSession session = MyBatisUtil.getSession();
		AreaMapper mapper = session.getMapper(AreaMapper.class);
		List<Area> selByp = mapper.selByp(parentid);
		return selByp;
	}

	@Override
	public List<Data> selLike(String title) {
		SqlSession session = MyBatisUtil.getSession();
		DataMapper mapper = session.getMapper(DataMapper.class);
		List<Data> selLike = mapper.selLike(title);
		session.close();
		return selLike;
	}

}

 

AreaServlet:

package com.bjsxt.servlet;

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

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

import com.bjsxt.pojo.Area;
import com.bjsxt.service.AreaServiceImpl;
import com.bjsxt.service.impl.AreaService;
import com.google.gson.Gson;


public class AreaServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		int parentid = Integer.parseInt(req.getParameter("parentid"));
		AreaService as=new AreaServiceImpl();
		List<Area> selByp = as.selByp(parentid);
		resp.getWriter().write(new Gson().toJson(selByp));
		
	}
}

 

工具类：

package com.bjsxt.util;

import java.io.IOException;
import java.io.InputStream;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class MyBatisUtil {
	private static SqlSessionFactory factory=null;
	static{
		try {
			InputStream	is = Resources.getResourceAsStream("mybatis-cfg.xml");
			 factory = new SqlSessionFactoryBuilder().build(is);

		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
	public static SqlSession getSession() {
		SqlSession session =null;
		if (factory!=null) {
			 session = factory.openSession(true);
		}
		return session;
	}
}

 

mybatis配置文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
  <configuration>
  <!-- properties加载配置文件
   -->
  <properties resource="db.properties"></properties>
  <settings>
  	<setting name="logImpl" value="LOG4J"/>
  </settings>
  <typeAliases>
  	<package name="com.bjsxt.pojo"/>
  </typeAliases>
  	<environments default="dev">
 		<environment id="dev">
 			<transactionManager type="JDBC"/>
 			<dataSource type="POOLED">
 				<property name="driver" value="${jdbc.driver}"/>
 				<property name="url" value="${jdbc.url}"/>
 				<property name="username" value="${jdbc.username}"/>
 				<property name="password" value="${jdbc.password}"/>
 			</dataSource>
 		</environment>
  	</environments>
  	<mappers >
  		<package name="com.bjsxt.mapper"/>
  	</mappers>
  </configuration>

 

三级联动的jsp页面（封装之后的）：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
		$(function(){
		//请求省
			getData(0, "pre");
			
			//创建监听请求市
			$("#pre").change(function(){
				var areaid=$("#pre").val();
				getData(areaid, "city");		
			});
			
			//监听请求县乡
			$("#city").change(function(){
			var areaid=$("#city").val();
				getData(areaid, "town");
			});
			
			//封装
				function getData(areaid, sid){
					//发起ajax请求,请求当前的信息
					$.get("area",{parentid:areaid},function(data){
					eval("var areas="+data);
					var sel=$("#"+sid);
					sel.empty();
					for(var i=0;i<areas.length;i++){
						sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
					}
					
					$("#"+sid).trigger("change");
				});			
		}
});
				
	</script>
</head>

<body style="background-color: gray;">
	<div style="margin: auto;width: 750px;margin-top: 300px;">
		省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
		市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
		区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
	</div>
</body>
</html>

 

三级联动的jsp页面（未封装的）：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="js/j.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get("area",{parentid:0},function(data){
				eval("var areas="+data);
				var sel=$("#pre");
				//清空原有数据
				sel.empty;
				//遍历获取到的所有ares
				for(var i=0;i<areas.length;i++){
					//填充，查一个填一个
					sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
				}
				
				$("#pre").trigger("change");
			});
			
			//创建监听
			$("#pre").change(function(){
				var areaid=$("#pre").val();
				//发起ajax请求,请求当前市的信息
				$.get("area",{parentid:areaid},function(data){
					eval("var areas="+data);
					var sel=$("#city");
					sel.empty();
					for(var i=0;i<areas.length;i++){
						sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
					}
					
					$("#city").trigger("change");
				})			
			});
			
			//监听县乡
			$("#city").change(function(){
			var areaid=$("#city").val();
				$.get("area",{parentid:areaid},function(data){
					eval("var areas="+data);
					var sel=$("#town");
					sel.empty();
					for(var i=0;i<areas.length;i++){
						sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
					}
				})
			})
		})
	</script>
  </head>
  
  <body style="background-color: gray;">
  	<div style="margin: auto;width: 750px;margin-top: 300px;">
  		 省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
   	 	 市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
   	 	 区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
  	</div>	
  </body>
</html>

效果动态图：