python三级联动函数式_继上一个三级联动的补充--使用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对象设置属性

$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

/p>

"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

"http://struts.apache.org/dtds/struts-2.3.dtd">

method="{1}">

provinces\[\d+\]\.pid,provinces\[\d+\]\.pname

/index.jsp

method="{1}">

cities\[\d+\]\.cid,cities\[\d+\]\.cname

/index.jsp

method="{1}">

countries\[\d+\]\.tid,countries\[\d+\]\.tname

/index.jsp