一個完整(詳細註釋分析)的整合hibernate與struts連線資料庫的三級聯動

y_keven發表於2013-03-20

1.主要實現功能效果圖如下:




2.專案案例分析

    由於地方有限,這裡只列出核心程式碼,js的編寫原始碼和struts的原始碼;更多原始碼,以及資料庫見本人資源,0分上傳,免費供大家參考學習:tianyazaiheruan

    尊重別人的勞動成果與智慧財產權,轉載請指明出處:楊凱專屬頻道

    該專案為一個整合hibernatestruts,利用json物件存放臨時資料庫資料,連線資料的三級聯動;改專案使用ajax傳遞請求連線和引數;資料庫結果為三表級聯,三表之間依次都是多對一的關係;其中程式碼核心程式碼都附有詳細的註釋,供大家研討學習;

    其中包括:Select.js:主要實現功能的jsUtil.js:工具js,封裝一些ajax的請求方法以及建立ajax的方法還有模擬jQuery的根據id獲取dom物件;Struts.xml:主要亮點在配置一個多變級聯時防止載入多個表的操作,從而達到解決多表級聯操作的時候經常出現的session已關閉的bug

3.核心程式碼

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>



相關文章