一个完整(详细注释分析)的整合hibernate与struts连接数据库的三级联动

1.主要实现功能效果图如下:




2.项目案例分析

由于地方有限,这里只列出核心代码,js的编写源码和struts的源码;更多源码,以及数据库见本人资源,0分上传,免费供大家参考学习:tianyazaiheruan

尊重别人的劳动成果与知识产权,转载请指明出处:杨凯专属频道

该项目为一个整合hibernatestruts,利用json对象存放临时数据库数据,连接数据的三级联动;改项目使用ajax传递请求连接和参数;数据库结果为三表级联,三表之间依次都是多对一的关系;其中代码核心代码都附有详细的注释,供大家研讨学习;

其中包括:Select.js:主要实现功能的jsUtil.js:工具js,封装一些ajax的请求方法以及创建ajax的方法还有模拟jQuery的根据id获取dom对象;Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作,从而达到解决多表级联操作的时候经常出现的session已关闭的bug

3.核心代码

Select.js:主要实现功能的js

window.onload = function() {


// 创建省份的节点对象

var provinceDom = $("province");

// 创建市的节点对象

var cityDom = $("city");

// 创建城镇的节点对象

var countryDom = $("country");


// 实现省的操作

// 发送ajax请求

var url = "./csdn/ProvinceAction_select.action?time="

+ new Date().getTime();

sendGet(content, url, getProvinceSuccess, getProvinceFail);


function getProvinceSuccess(xhr) {

// 获取省份的json对象

var provinceObj = eval_r("(" + xhr.responseText + ")");

// 获取存放在json对象中的省份数组

var jsonprovinces = provinceObj.provinces;

// 遍历省份数组

for ( var i = 0; i < jsonprovinces.length; i++) {

// 得到具体的省

var jsonProvince = jsonprovinces[i];

// 创建显示省的option

var provinceOption = document.createElement_x("option");

// 设置option标签中具体省的value值

provinceOption.setAttribute("value", jsonProvince.pid);

// 设置option标签中具体省的文本,并追加option中

provinceOption.appendChild(document

.createTextNode(jsonProvince.pname));

// 将省的option追加到省的select

provinceDom.appendChild(provinceOption);

}

}

function getProvinceFail() {

alert("获取省份失败!");

}


// 实现市的操作

provinceDom.onchange = function() {

// 获取发生改变事件的省的id

var pid = this.value;

// 判断是否需要查询的操作

if (pid != -1) {

// 发送ajax请求

var url = "./csdn/CityAction_select.action?time="

+ new Date().getTime();

var content = "pid=" + pid;

sendPost(content, url, getCitySuccess, getCityFail);


}

};


function getCitySuccess(xhr) {


// 清空数据;清空市

cityDom.length = 1;

// 得到城市的json对象

var cityObj = eval_r("(" + xhr.responseText + ")");

// 由城市的json对象获取城市的数组

var jsonCities = cityObj.cities;

for ( var i = 0; i < jsonCities.length; i++) {

// 得到一个具体的市对象

var jsonCity = jsonCities[i];

var cityOption = document.createElement_x("option");

// 设置省的value值

cityOption.setAttribute("value", jsonCity.cid);

// 设置省的文本,并追加option中

cityOption.appendChild(document.createTextNode(jsonCity.cname));

cityDom.appendChild(cityOption);

}

}

function getCityFail(xhr) {


}


// 实现城镇的操作

cityDom.onchange = function() {


var cid = this.value;

// 判断是否需要查询的操作

if (cid != -1) {

// 发送ajax请求

var url = "./csdn/CountryAction_select.action?time="

+ new Date().getTime();

var content = "cid=" + cid;

sendPost(content, url, getcountrySuccess, getcountryFail);

}

};


function getcountrySuccess(xhr) {


// 清空数据:城镇

countryDom.length = 1;

var countryObj = eval_r("(" + xhr.responseText + ")");

var jsonCountries = countryObj.countries;

for ( var i = 0; i < jsonCountries.length; i++) {

var jsonCountry = jsonCountries[i];

var countryOption = document.createElement_x("option");

countryOption.setAttribute("value", jsonCountry.tid);

countryOption.appendChild(document

.createTextNode(jsonCountry.tname));

countryDom.appendChild(countryOption);

}

}

function getcountryFail(xhr) {

alert("获取城镇失败!");

}

};


Util.js:工具js,封装一些ajax的请求方法以及创建ajax的方法还有模拟jQuery的根据id获取dom对象

//通过id获取dom对象

function $(id) {

return document.getElementByIdx_x(id);

}


// ajax技术必须创建XMLHTTPRequest对象 ,获取XMLHTTPRequest对象的操作

function createXHR() {

var xhr;

var aVersion = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",

"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];

try {

// 高版本ie、firefox、opera等浏览器直接new出ajax对象

xhr = new XMLHttpRequest();

} catch (e) {

// 低版本的IE,ie6以下版本需要通过以下操作创建ajax对象

for ( var i = 0; i < aVersion.length; i++) {

try {

xhr = new ActiveXObject(aVersion[i]);

return xhr;

} catch (e) {

continue;

}

}

}

return xhr;

}


//post方式发送请求的方法

function sendPost(content, url, success, fail) {

var xhr = createXHR();

// 触发器

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200 || xhr.status == 304) {

success(xhr);

} else {

fail(xhr);

}

}

};

// 打开请求

xhr.open("POST", url, true);

// 设置类型

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 发送请求

xhr.send(content);

}


//get方式发送请求的方法

function sendGet(content, url, success, fail) {

var xhr = createXHR();

// 触发器

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200 || xhr.status == 304) {

success(xhr);

} else {

fail(xhr);

}

}

};

// 打开请求

xhr.open("GET", url+"?"+content, true);

// 发送请求

xhr.send(null);

}


Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作,从而达到解决多表级联操作的时候经常出现的session已关闭的bug

"-//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


你可能感兴趣的:(三级联动,it)