Ajax局部刷新实现三级联动
要实现从数据库获取出数据来实现联动，可以使用ajax（Asynchronous javascript and xml （异步的javascript 和 xml））局部刷新技术。ajax不是新的编程语言，而是一种局部刷新的技术，是局部刷新技术块的标准。
优点：不需要加载整个界面，就可以与服务器交互并且更新部分数据。ajax不需要任何浏览器插件，但是需要用户允许使用javascript在浏览器上运行。
实现省份、城市、地区三级联动
1、首先在数据库创建一张MyCity的数据表并添加数据，如图所示：
2、创建MyCity实体，并创建其get（）set（）方法
public class MyCity implements Serializable{
private static final long serialVersionUID = 1L;
private int id ; //编号
private String name;//名称
private int status; //状态
private void MyCity() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
}
3、在dao层连接数据库，并创建获取省份的方法
public class CityDao {
private Connection conn = null ;
private PreparedStatement ps = null;
private ResultSet rs = null;
/**
* 获取省份
* @param id
* @return
*/
public List<MyCity> getPro(int id) {
List<MyCity> citys = new ArrayList<MyCity>();
String sql = "select * from mycity where 1=1 ";
if(id != 0){
sql += " and status = " + id ;
}else{
sql += "and status is null ";
}
conn = DBUtil.getConn();
try {
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()){
MyCity mycity = new MyCity();
mycity.setId(rs.getInt("id"));
mycity.setName(rs.getString("name"));
citys.add(mycity);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
DBUtil.close(rs, ps, conn);
}
return citys;
}
}
4、创建CityServlet
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private CityDao dao = new CityDao();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//设置为xml类型
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//如果获取的id为空，则将新定义的id赋值为0，如果不为0则将获取到的id的值赋值给定义的id
int id = null == request.getParameter("id")?0:Integer.parseInt(request.getParameter("id"));
List<MyCity> pros = dao.getPro(id);
String msg = "<Pros>";
for (int i = 0; i <pros.size(); i++) {
MyCity mycity = pros.get(i);
msg += "<MyCity>";
msg += "<id>"+mycity.getId()+"</id>";
msg += "<name>"+mycity.getName()+"</name>";
msg += "</MyCity>";
}
msg += "</Pros>";
out.print(msg);
out.flush();
out.close();
}
}
5、编写主页面（包括获取省份、城市、地区函数和创建XNLHttpRequest()引擎对象的函数及回调函数）
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML >
<html>
<head>
<title>ajax 三级联动</title>
</head>
<body onload="getPro();">
省份：<select id="pro" onchange="getCity();">
<option>请选择</option>
</select>
城市：<select id="city" onchange="getArea();">
<option>请选择</option>
</select>
地区：<select id="area" >
<option>请选择</option>
</select>
</body>
<script type="text/javascript">
var xhr = null;
//即将要改变的select列表
var selectName = "";
//创建XNLHttpRequest()引擎对象的函数
function creatXhr(){
if(xhr==null){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
//获取所有省份的函数
function getPro(){
creatXhr();
xhr.open("get","CityServlet",true);
xhr.send(null);
selectName = "pro";
xhr.onreadystatechange= callback;
}
//获取所有城市的函数
function getCity(){
creatXhr();
var pro = document.getElementById("pro").value;
xhr.open("get","CityServlet?id="+pro,true);
xhr.send(null);
selectName = "city";
xhr.onreadystatechange= callback;
}
//获取所有地区的方法
function getArea(){
creatXhr();
var city = document.getElementById("city").value;
xhr.open("get","CityServlet?id="+city,true);
xhr.send(null);
selectName = "area";
xhr.onreadystatechange=callback;
}
//回调函数
function callback(){
var mydom = xhr.responseXML;
//页面显示内容
var pro = mydom.getElementsByTagName("MyCity");
var mypro = document.getElementById(selectName);
mypro.options.length=1;
for (var i = 0; i <pro.length; i++) {
var id = pro.item(i).getElementsByTagName("id")[0].textContent;
var name = pro.item(i).getElementsByTagName("name")[0].textContent;
var opt = new Option(name,id);
mypro.options.add(opt);
}
}
</script>
</html>
6、连接服务器，在浏览器显示的结果如下：
单击省份下拉列表框出现在数据库中添加的省份
[img]
[/img]
选择省份后，单击城市下拉列表框出现城市选项
[img]
[/img]
选择城市后，单击地区下拉列表框出现地区选项
[img]
[/img]
选择数据库中没有存放城市和地区的省份，则城市和地区下拉列表框中无选项
[img]
[/img]
[img]
[/img]