一个完整（详细注释分析）的整合hibernate与struts连接数据库的三级联动 javajqueryhibernatejson

1.主要实现功能效果图如下：

 

2.项目案例分析

由于地方有限，这里只列出核心代码，js的编写源码和struts的源码；更多源码，以及数据库见本人资源，0分上传，免费供大家参考学习:tianyazaiheruan

尊重别人的劳动成果与知识产权，转载请指明出处：杨凯专属频道

该项目为一个整合hibernate与struts，利用json对象存放临时数据库数据，连接数据的三级联动；改项目使用ajax传递请求连接和参数；数据库结果为三表级联，三表之间依次都是多对一的关系；其中代码核心代码都附有详细的注释，供大家研讨学习；

其中包括：Select.js:主要实现功能的js；Util.js:工具js，封装一些ajax的请求方法以及创建ajax的方法还有模拟jQuery的根据id获取dom对象；Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作，从而达到解决多表级联操作的时候经常出现的session已关闭的bug

Select.js:主要实现功能的js
window.onload = function() {

	// 创建省份的节点对象
	var provinceDom = $("province");
	// 创建市的节点对象
	var cityDom = $("city");
	// 创建城镇的节点对象
	var countryDom = $("country");

	// 实现省的操作
	// 发送ajax请求
	var url = "./csdn/ProvinceAction_select.action?time="
			+ new Date().getTime();
	sendGet(content, url, getProvinceSuccess, getProvinceFail);

	function getProvinceSuccess(xhr) {
		// 获取省份的json对象
		var provinceObj = eval("(" + xhr.responseText + ")");
		// 获取存放在json对象中的省份数组
		var jsonprovinces = provinceObj.provinces;
		// 遍历省份数组
		for ( var i = 0; i < jsonprovinces.length; i++) {
			// 得到具体的省
			var jsonProvince = jsonprovinces[i];
			// 创建显示省的option
			var provinceOption = document.createElement("option");
			// 设置option标签中具体省的value值
			provinceOption.setAttribute("value", jsonProvince.pid);
			// 设置option标签中具体省的文本，并追加option中
			provinceOption.appendChild(document
					.createTextNode(jsonProvince.pname));
			// 将省的option追加到省的select
			provinceDom.appendChild(provinceOption);
		}
	}
	function getProvinceFail() {
		alert("获取省份失败!");
	}

	// 实现市的操作
	provinceDom.onchange = function() {
		// 获取发生改变事件的省的id
		var pid = this.value;
		// 判断是否需要查询的操作
		if (pid != -1) {
			// 发送ajax请求
			var url = "./csdn/CityAction_select.action?time="
					+ new Date().getTime();
			var content = "pid=" + pid;
			sendPost(content, url, getCitySuccess, getCityFail);

		}
	};

	function getCitySuccess(xhr) {

		// 清空数据；清空市
		cityDom.length = 1;
		
		
		// 得到城市的json对象
		var cityObj = eval("(" + xhr.responseText + ")");
		// 由城市的json对象获取城市的数组
		var jsonCities = cityObj.cities;
		for ( var i = 0; i < jsonCities.length; i++) {
			// 得到一个具体的市对象
			var jsonCity = jsonCities[i];
			var cityOption = document.createElement("option");
			// 设置省的value值
			cityOption.setAttribute("value", jsonCity.cid);
			// 设置省的文本，并追加option中
			cityOption.appendChild(document.createTextNode(jsonCity.cname));
			cityDom.appendChild(cityOption);
		}
	}
	function getCityFail(xhr) {

	}

	// 实现城镇的操作
	cityDom.onchange = function() {

		var cid = this.value;
		// 判断是否需要查询的操作
		if (cid != -1) {
			// 发送ajax请求
			var url = "./csdn/CountryAction_select.action?time="
					+ new Date().getTime();
			var content = "cid=" + cid;
			sendPost(content, url, getcountrySuccess, getcountryFail);
		}
	};

	function getcountrySuccess(xhr) {

		// 清空数据:城镇
		countryDom.length = 1;
		
		var countryObj = eval("(" + xhr.responseText + ")");
		var jsonCountries = countryObj.countries;
		for ( var i = 0; i < jsonCountries.length; i++) {
			var jsonCountry = jsonCountries[i];
			var countryOption = document.createElement("option");
			countryOption.setAttribute("value", jsonCountry.tid);
			countryOption.appendChild(document
					.createTextNode(jsonCountry.tname));
			countryDom.appendChild(countryOption);
		}
	}
	function getcountryFail(xhr) {
		alert("获取城镇失败！");
	}
};

Util.js:工具js，封装一些ajax的请求方法以及创建ajax的方法还有模拟jQuery的根据id获取dom对象
//通过id获取dom对象
function $(id) {
	return document.getElementById(id);
}

// ajax技术必须创建XMLHTTPRequest对象 ，获取XMLHTTPRequest对象的操作
function createXHR() {
	var xhr;
	var aVersion = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
			"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];
	try {
		// 高版本ie、firefox、opera等浏览器直接new出ajax对象
		xhr = new XMLHttpRequest();
	} catch (e) {
		// 低版本的IE,ie6以下版本需要通过以下操作创建ajax对象
		for ( var i = 0; i < aVersion.length; i++) {
			try {
				xhr = new ActiveXObject(aVersion[i]);
				return xhr;
			} catch (e) {
				continue;
			}
		}
	}
	return xhr;
}

//post方式发送请求的方法
function sendPost(content, url, success, fail) {
	var xhr = createXHR();
	// 触发器
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200 || xhr.status == 304) {
				success(xhr);
			} else {
				fail(xhr);
			}
		}
	};
	// 打开请求
	xhr.open("POST", url, true);
	// 设置类型
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 发送请求
	xhr.send(content);
}

//get方式发送请求的方法
function sendGet(content, url, success, fail) {
	var xhr = createXHR();
	// 触发器
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200 || xhr.status == 304) {
				success(xhr);
			} else {
				fail(xhr);
			}
		}
	};
	// 打开请求
   xhr.open("GET", url+"?"+content, true);	
	// 发送请求	
	xhr.send(null);
}

Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作，从而达到解决多表级联操作的时候经常出现的session已关闭的bug
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<include file="www/csdn/project/resource/struts-constant.xml" />

	<package name="csdn" namespace="/csdn" extends="json-default">
	
		<action name="ProvinceAction_*" class="www.csdn.project.action.ProvinceAction"
			method="{1}">
			<result type="json">
			<!-- 改配置参数为关键，如果不设置改参数json对象会默认加载城市类导致出现session已关闭的错误 -->
				<param name="includeProperties">provinces\[\d+\]\.pid,provinces\[\d+\]\.pname</param>
			</result>
			<result name="input">/index.jsp</result>
		</action>

		<action name="CityAction_*" class="www.csdn.project.action.CityAction"
			method="{1}">
			<result type="json">
				<param name="includeProperties">cities\[\d+\]\.cid,cities\[\d+\]\.cname</param>
			</result>
			<result name="input">/index.jsp</result>
		</action>

		<action name="CountryAction_*" class="www.csdn.project.action.CountryAction"
			method="{1}">
			<result type="json">
				<param name="includeProperties">countries\[\d+\]\.tid,countries\[\d+\]\.tname</param>
			</result>
			<result name="input">/index.jsp</result>
		</action>
		
	</package>
</struts>