1.项目概述
项目使用的开发技术：hibernate+struts+ajax+jQuery+mysql
与上一个三级联动不同的是：上一个项目是使用dom技术编写的整个js代码，存在一定的不足与bug，即浏览器不兼容，只在火狐中有成效，IE、opera、google等都不能兼容。。。到底是哪个模块导致的不兼容，本人目前正在测试中，欢迎有志之士一块测试，对本人鞭策；这个项目改进了上一个项目的不同，使用轻量的jQuery技术编写js的核心代码，不存在浏览器兼容的问题（本人亲测：IE、opera、火狐、google），而且代码更加简化和逻辑化；核心代码的编写采用了jQuery中提供的三种ajax接口的方法，来实现使用ajax技术的异步通讯，具体见源码，其中有详细的注释；
转载请指明出处：
完整项目（默认成1分了，忘了改变资源分值了，本来想0分上传的，抱歉）：
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对象设置属性 $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对象设置属性 $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对象设置属性 $countryOpt.attr("value", jsonCountry.tid); $countryOpt.text(jsonCountry.tname); // 把创建的option节点省节点添加到城镇的select节点中 $("#country").append($countryOpt); } }, "json"); }); });Struts.xml provinces\[\d+\]\.pid,provinces\[\d+\]\.pname /index.jsp cities\[\d+\]\.cid,cities\[\d+\]\.cname /index.jsp countries\[\d+\]\.tid,countries\[\d+\]\.tname /index.jsp