微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

一个完整的Ajax开发示例：二级联动

分类：Ajax作者：编程之家AI导航网

需求：页面显示两个下拉列表，一个显示省，一个显示市，要求选择省的时候显示对应的市，不选择则后面的下拉列表不显示内容。本案例通过JSP+Servlet+Hibernate+MysqL完成

（1）编写JSP页面

<html>
  <head>
    <title>jsTest</title>
    <!-- 引入js文件 -->
    <script type="text/javascript" src="demo.js"></script>
  </head>
  
  <body>
    <select name="pro" id="pro" onchange="javascript:selectChange();">
    	<!-- 省份 -->
    	<option value="">--请选择--</option>
    </select>
    <select name="city" id="city">
    	<!-- 城市 -->
    	<option value="">--请选择--</option>
    </select>
  </body>
</html>

（2）构建PO，Pro和City,Pro和City是一对多的关系，

public class Pro {
	private int id;
	private String proName;
	private Set<City> citySet = new HashSet<City>();
	
	public Set<City> getCitySet() {
		return citySet;
	}
	public void setCitySet(Set<City> citySet) {
		this.citySet = citySet;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getProName() {
		return proName;
	}
	public void setProName(String proName) {
		this.proName = proName;
	}
	
}

public class City {
	private int id;
	private String cityName;
	private Pro pro;
	
	
	public Pro getPro() {
		return pro;
	}
	public void setPro(Pro pro) {
		this.pro = pro;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	public City(int id,String cityName) {
		super();
		this.id = id;
		this.cityName = cityName;
	}
	public City() {
		super();
		// Todo Auto-generated constructor stub
	}
}

（3）创建PO的配置文件，在此之前要配置Hibernate的主配置文件

<hibernate-mapping package="cn.itcast.domain">
	<class name="Pro" table="t_pro">
		<id name="id" type="integer" column="id">
			<generator class="native"></generator>
		</id>
		<property name="proName" type="string" column="proName"></property>
		<set name="citySet" cascade="save-update">
			<key column="pro_id"></key>
			<one-to-many class="City"/>
		</set>
	</class>
</hibernate-mapping>

<hibernate-mapping package="cn.itcast.domain">
	<class name="City" table="t_city">
		<id name="id" type="integer" column="id">
			<generator class="native"></generator>
		</id>
		<property name="cityName" type="string" column="cityName"></property>
		
		<many-to-one name="pro" class="Pro" column="pro_id"></many-to-one>
	</class>
</hibernate-mapping>

（4）创建测试类添加数据

public class Test {
	
	public static void main(String[] args) {
		save();
	}
	public static void save(){
		Session session = SessionUtils.getCurrentSession();
		Transaction transaction = session.beginTransaction();
		
		try {
			//创建Pro对象
			Pro pro = new Pro();
			pro.setProName("河北");
			City city1 = new City();
			city1.setCityName("石家庄");
			City city2 = new City();
			city2.setCityName("廊坊");
			City city3 = new City();
			city3.setCityName("秦皇岛");
			City city4 = new City();
			city4.setCityName("邯郸");
			City city5 = new City();
			city5.setCityName("保定");
			pro.getCitySet().add(city1);
			pro.getCitySet().add(city2);
			pro.getCitySet().add(city3);
			pro.getCitySet().add(city4);
			pro.getCitySet().add(city5);
			
			Pro pro2 = new Pro();
			pro2.setProName("山东");
			City city6 = new City();
			city6.setCityName("济南");
			City city7 = new City();
			city7.setCityName("日照");
			City city8 = new City();
			city8.setCityName("青岛");
			pro2.getCitySet().add(city6);
			pro2.getCitySet().add(city7);
			pro2.getCitySet().add(city8);
			
			session.save(pro);
			session.save(pro2);
			
			transaction.commit();
		} catch (HibernateException e) {
			transaction.rollback();
			throw new RuntimeException(e.getMessage(),e);
		} 
	}
}

（5）DAO层实现

public class ProDao {
	
	
	/**
	 * 获取所有的省份对象集合
	 * @return
	 */
	public List<Pro> getPro(){
		Session session = SessionUtils.openSession();
		Transaction transaction = session.beginTransaction();
		try {
			Query query = session.createquery("from Pro");
			List<Pro> list = query.list();
			transaction.commit();
			return list;
		} catch (HibernateException e) {
			transaction.rollback();
			throw new RuntimeException(e.getMessage(),e);
		} finally{
			session.close();
		}
	}
	
	/**
	 * 通过省份名来获取省份对象
	 * @param pro
	 * @return
	 */
	public Pro getProByName(String pro) {
		Session session = SessionUtils.openSession();
		System.out.println(pro);
		Transaction transaction = session.beginTransaction();
		try {
			Query query = session.createquery("from Pro where proName=?");
			query.setParameter(0,pro);
			Pro pro1 = (Pro) query.uniqueResult();
			transaction.commit();
			return pro1;
		} catch (HibernateException e) {
			transaction.rollback();
			throw new RuntimeException(e.getMessage(),e);
		} finally{
			session.close();
		}
	}

	/**
	 * 通过省份的id来获取各省的城市的信息，城市表的外键指向省份的id
	 * @param id
	 * @return
	 */
	public List<City> getCitysByProId(int id) {
		Session session = SessionUtils.openSession();
		Transaction transaction = session.beginTransaction();
		try {
			Query query = session.createquery("from City where pro.id=?");
			query.setParameter(0,id);
			List<City> citys = query.list();
			transaction.commit();
			return citys;
		} catch (HibernateException e) {
			transaction.rollback();
			throw new RuntimeException(e.getMessage(),e);
		} finally{
			session.close();
		}
	}
}

（6）Service层实现

public class ProService {
	private ProDao dao = new ProDao();
	public List<Pro> getPro(){
		return dao.getPro();
	}
	public Pro getProByName(String pro) {
		return dao.getProByName(pro);
	}
	public List<City> getCitysByProId(int id) {
		return dao.getCitysByProId(id);
	}
}

（7）WEB层实现

/**
 * 页面初始化时，获取第一个下拉列表的所有省份的servlet
 * @author Administrator
 *
 */
public class DemoServlet extends HttpServlet {
	public void doGet(HttpServletRequest request,HttpServletResponse response)
			throws servletexception,IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		
		ProService service = new ProService();
		List<Pro> list = service.getPro();
		XStream xst = new XStream();
		xst.alias("province",Pro.class);
		xst.useAttributeFor(Pro.class,"id");
		xst.useAttributeFor(Pro.class,"proName");
		String xml = xst.toXML(list);
		response.getWriter().write(xml);
	}
	public void doPost(HttpServletRequest request,IOException {
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		
	}
}


/**
 * 页面初始化时，获取第一个下拉列表的所有省份的servlet
 * @author Administrator
 *
 */
public class DemoServlet extends HttpServlet {
	public void doGet(HttpServletRequest request,IOException {
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
	}
}

（8）获取HibernateSession的工具类

public class SessionUtils {
	private static SessionFactory sessionFactory = null;
	static {
		sessionFactory = new Configuration().configure().buildSessionFactory();
	}
	public static Session getCurrentSession(){
		return sessionFactory.getCurrentSession();
	}
	public static Session openSession(){
		return sessionFactory.openSession();
	}
}

（9）编写js文件，当打开页面是初始化所有省份，当选择省份时在第二个下拉列表框中显示对应的城市。

//获取XMLHttpRequest对象的方法，此方法是固定方法。
function ajaxFunction(){
	var xmlHttp;
	try{ // Firefox,Opera 8.0+,Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e){
		try{// Internet Explorer
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
			try{
			   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}
	return xmlHttp;
}

//获取所有的省份的信息，添加到省份的下拉列表中
window.onload = function(){
	//获取对象
	var xmlHttp = ajaxFunction();
	//打开链接
	xmlHttp.open("get","../servlet/DemoServlet",true);
	//发送请求。
	xmlHttp.send(null);
	//接收响应
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				var docXml = xmlHttp.responseXML;
				var proXmlElements = docXml.getElementsByTagName("province");
				
				for(var i=0;i<proXmlElements.length;i++){
					var proEle = proXmlElements[i];
					var provalue = proEle.getAttribute("proName");
					
					var option = document.createElement("option");
					option.setAttribute("value",provalue);
					var text = document.createTextNode(provalue);
					option.appendChild(text);
					
					var proElement = document.getElementById("pro");
					proElement.appendChild(option);
				}
			}
		}
	}
}

//点击省份的下拉列表，当列表发生改变时，显示对应省份的城市
var selectChange = function(){
	//每次改变的时候，都要将上次的清除，否则会累加到下面。
	//清除动作。
	var cityObj = document.getElementById("city");
	var cityOptions = cityObj.getElementsByTagName("option");
	for(var i=0;i<cityOptions.length;i++){
		if(cityOptions[i].getAttribute("value")!=null){
			cityObj.removeChild(cityOptions[i]);
		}
		i--;
	}
	var xmlHttp = ajaxFunction();
	var obj = document.getElementById("pro");//定位id
	var index = obj.selectedindex; // 选中索引
	var proName = obj.options[index].text; // 选中文本
	//var value = obj.options[index].value; // 选中值
	//var proName = currentPro.getAttribute("value");
	//建立连接
	xmlHttp.open("get","../servlet/GetCityServlet?pro="+proName,true);
	//发送请求
	xmlHttp.send(null);
	//接收响应
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				//获取响应的xml文本。
				var docXml = xmlHttp.responseXML;
				var cityEles = docXml.getElementsByTagName("city");
				var cityElement = document.getElementById("city");
				
				var oneOption = document.createElement("option");
				oneOption.setAttribute("value","");
				var oneText = document.createTextNode("--请选择--");
				oneOption.appendChild(oneText);
				cityElement.appendChild(oneOption);
				
				for(var i=0;i<cityEles.length;i++){
					var cityEle = cityEles[i];
					var cityValue = cityEle.getAttribute("cityName");
					
					//创建option节点
					var option = document.createElement("option");
					option.setAttribute("value",cityValue);
					//创建option内的文本节点。
					var text = document.createTextNode(cityValue);
					//将文本节点添加到option节点上。
					option.appendChild(text);
					
					//获取jsp中的城市下拉列表的节点，并将创建的option节点添加到select上
					
					cityElement.appendChild(option);
				}
			}
		}
	}
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native