继上一个三级联动的补充--使用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>