繼上一個三級聯動的補充--使用jQuery編寫各種瀏覽器相容簡易專案

1.專案概述

   專案使用的開發技術：hibernate+struts+ajax+jQuery+mysql

   與上一個三級聯動不同的是：上一個專案是使用dom技術編寫的整個js程式碼，存在一定的不足與bug，即瀏覽器不相容，只在火狐中有成效，IE、opera、google等都不能相容。。。到底是哪個模組導致的不相容，本人目前正在測試中，歡迎有志之士一塊測試，對本人鞭策；這個專案改進了上一個專案的不同，使用輕量的jQuery技術編寫js的核心程式碼，不存在瀏覽器相容的問題（本人親測：IE、opera、火狐、google），而且程式碼更加簡化和邏輯化；核心程式碼的編寫採用了jQuery中提供的三種ajax介面的方法，來實現使用ajax技術的非同步通訊，具體見原始碼，其中有詳細的註釋；

轉載請指明出處：楊凱專屬頻道

完整專案（預設成1分了，忘了改變資源分值了，本來想0分上傳的，抱歉）：tianyazaiheruan

2．專案原始碼

$(document).ready(
		function() {

			// jQery的第一個案例
			// 呼叫ajax請求,js的原生格式，直接寫{}物件
			$.ajax({
				
				async : true, // 非同步傳送請求
				type : "GET", // 採用傳送請求的方式，預設的是get，還有post方式
				url : "./csdn/ProvinceAction_select.action?time="
						+ new Date().getTime(), // 設定請求的url地址
				dataType : "json", // 伺服器預返回的資料格式，改屬性有：html、text、xml、script等多種值型別
				success : function(data, textstatus) { // 成功返回的回撥函式
					// 獲取所有的省
					var jsonPros = data.provinces;
					// 遍歷省
					for ( var i = 0; i < jsonPros.length; i++) {
						// 得到具體的省
						var jsonPro = jsonPros[i];
						// 建立一個option的jQuery物件
						var $proOpt = $("<option></option>");
						// 為option物件設定屬性
						$proOpt.attr("value", jsonPro.pid);
						$proOpt.text(jsonPro.pname);
						// 把建立的option省節點新增到省的select節點中
						$("#province").append($proOpt);
					}
				},
				error : function(xhr, textstatus, errorThrown) { // 失敗返回的回撥函式
				}
			});

			// jQery的第二個案例
			// 當省發生變化的時候出發的事件
			$("#province").bind(
					"change",
					function() {

						// 清空資料
						$("#city")[0]=1;
						$("#country")[0]=1;
						
						// 對ajax的進一步封裝
						// 傳遞的資料
						var pid = $("#province").val(); //
						$.get("./csdn/CityAction_select.action?time="
								+ new Date().getTime(), // url請求的luj
						{
							pid : pid
						}, // 請求傳遞的引數
						function(data) { // 返回成功時的回撥函式
							// 得到所有的市
							var jsonCities = data.cities;
							for ( var i = 0; i < jsonCities.length; i++) {
								// 得到具體的市
								var jsonCity = jsonCities[i];
								// 建立一個option的jQuery物件
								var $cityOpt = $("<option></option>");
								// 為option物件設定屬性
								$cityOpt.attr("value", jsonCity.cid);
								$cityOpt.text(jsonCity.cname);
								// 把建立的option節點省節點新增到市的select節點中
								$("#city").append($cityOpt);
							}
						}, "json"); // 返回的資料型別
					});

			// jQery的第三個案例

			$("#city").change(
					function() {

						// 清空資料
						$("#country")[0]=1;

						var cid = $("#city").val();
						// post方法傳送ajax請求
						$.post("./csdn/CountryAction_select.action?time="
								+ new Date().getTime(), {
							cid : cid
						}, function(data) {
							// 得到所有的市
							var jsonCountries = data.countries;
							for ( var i = 0; i < jsonCountries.length; i++) {
								// 得到具體的城鎮
								var jsonCountry = jsonCountries[i];
								// 建立一個option的jQuery物件
								var $countryOpt = $("<option></option>");
								// 為option物件設定屬性
								$countryOpt.attr("value", jsonCountry.tid);
								$countryOpt.text(jsonCountry.tname);
								// 把建立的option節點省節點新增到城鎮的select節點中
								$("#country").append($countryOpt);
							}
						}, "json");
					});

		});

Struts.xml
<?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>