Ajax局部刷新实现三级联动

最新推荐文章于 2024-08-06 16:00:52 发布

sunly-13

最新推荐文章于 2024-08-06 16:00:52 发布

阅读量114

点赞数

文章标签： ajax xml

J2EE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

[img]http://dl2.iteye.com/upload/attachment/0123/8217/702ae1c4-2c89-3389-a027-3d7232f748df.png[/img]

[b]2、创建MyCity实体，并创建其get（）set（）方法[/b]

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;
	}
}

[b]3、在dao层连接数据库，并创建获取省份的方法[/b]

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;
	}
}

[b]4、创建CityServlet[/b]

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();
	}
}

[b]5、编写主页面（包括获取省份、城市、地区函数和创建XNLHttpRequest()引擎对象的函数及回调函数）[/b]

<%@ 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>

[b]
6、连接服务器，在浏览器显示的结果如下：[/b]
单击省份下拉列表框出现在数据库中添加的省份
[img]
[img]http://dl2.iteye.com/upload/attachment/0123/8227/a630077a-b0df-3a9f-a786-db48cd52b0bd.png[/img]
[/img]

选择省份后，单击城市下拉列表框出现城市选项
[img]
[img]http://dl2.iteye.com/upload/attachment/0123/8219/5877872f-c006-32d3-9448-e9b9a18715e7.png[/img]
[/img]

选择城市后，单击地区下拉列表框出现地区选项
[img]
[img]http://dl2.iteye.com/upload/attachment/0123/8223/57245fd4-917f-3c67-9201-9474dca76d36.png[/img]
[/img]

选择数据库中没有存放城市和地区的省份，则城市和地区下拉列表框中无选项
[img]
[img]http://dl2.iteye.com/upload/attachment/0123/8221/cd844535-98d3-3dbb-a25f-b0fce0aa38da.png[/img]
[/img]

[img]
[img]http://dl2.iteye.com/upload/attachment/0123/8225/329fb6dc-f3a5-3c55-9cac-38a8a79a3af8.png[/img]
[/img]

sunly-13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax局部刷新实现三级联动

[align=center][size=x-large]Ajax局部刷新实现三级联动[/size][/align] 要实现从数据库获取出数据来实现联动，可以使用ajax（Asynchronous javascript and xml （异步的javascript 和 xml））局部刷新技术。ajax不是新的编程语言，而是一种局部刷新的技术，是局部刷新技术块的标准。[b]优点[...
复制链接

扫一扫