Ajax局部刷新实现三级联动

程序员文章站 2022-06-11 09:54:02

...

Ajax局部刷新实现三级联动

要实现从数据库获取出数据来实现联动，可以使用ajax（Asynchronous javascript and xml （异步的javascript 和 xml））局部刷新技术。ajax不是新的编程语言，而是一种局部刷新的技术，是局部刷新技术块的标准。
优点：不需要加载整个界面，就可以与服务器交互并且更新部分数据。ajax不需要任何浏览器插件，但是需要用户允许使用javascript在浏览器上运行。

实现省份、城市、地区三级联动
1、首先在数据库创建一张MyCity的数据表并添加数据，如图所示：

Ajax局部刷新实现三级联动

博客分类： J2EE ajaxxml

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]
Ajax局部刷新实现三级联动

博客分类： J2EE ajaxxml