Ajax局部刷新实现三级联动

前端之家收集整理的这篇文章主要介绍了Ajax局部刷新实现三级联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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,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]

猜你在找的Ajax相关文章