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