整合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.核心代码

[javascript] view plain copy print ?
  1. Select.js:主要实现功能的js
  2. window.onload = function() {
  3. // 创建省份的节点对象
  4. var provinceDom = $("province");
  5. // 创建市的节点对象
  6. var cityDom = $("city");
  7. // 创建城镇的节点对象
  8. var countryDom = $("country");
  9. // 实现省的操作
  10. // 发送ajax请求
  11. var url = "./csdn/ProvinceAction_select.action?time="
  12. + new Date().getTime();
  13. sendGet(content, url, getProvinceSuccess, getProvinceFail);
  14. function getProvinceSuccess(xhr) {
  15. // 获取省份的json对象
  16. var provinceObj = eval("(" + xhr.responseText + ")");
  17. // 获取存放在json对象中的省份数组
  18. var jsonprovinces = provinceObj.provinces;
  19. // 遍历省份数组
  20. for ( var i = 0; i < jsonprovinces.length; i++) {
  21. // 得到具体的省
  22. var jsonProvince = jsonprovinces[i];
  23. // 创建显示省的option
  24. var provinceOption = document.createElement("option");
  25. // 设置option标签中具体省的value值
  26. provinceOption.setAttribute("value", jsonProvince.pid);
  27. // 设置option标签中具体省的文本,并追加option中
  28. provinceOption.appendChild(document
  29. .createTextNode(jsonProvince.pname));
  30. // 将省的option追加到省的select
  31. provinceDom.appendChild(provinceOption);
  32. }
  33. }
  34. function getProvinceFail() {
  35. alert("获取省份失败!");
  36. }
  37. // 实现市的操作
  38. provinceDom.onchange = function() {
  39. // 获取发生改变事件的省的id
  40. var pid = this.value;
  41. // 判断是否需要查询的操作
  42. if (pid != -1) {
  43. // 发送ajax请求
  44. var url = "./csdn/CityAction_select.action?time="
  45. + new Date().getTime();
  46. var content = "pid=" + pid;
  47. sendPost(content, url, getCitySuccess, getCityFail);
  48. }
  49. };
  50. function getCitySuccess(xhr) {
  51. // 清空数据;清空市
  52. cityDom.length = 1;
  53. // 得到城市的json对象
  54. var cityObj = eval("(" + xhr.responseText + ")");
  55. // 由城市的json对象获取城市的数组
  56. var jsonCities = cityObj.cities;
  57. for ( var i = 0; i < jsonCities.length; i++) {
  58. // 得到一个具体的市对象
  59. var jsonCity = jsonCities[i];
  60. var cityOption = document.createElement("option");
  61. // 设置省的value值
  62. cityOption.setAttribute("value", jsonCity.cid);
  63. // 设置省的文本,并追加option中
  64. cityOption.appendChild(document.createTextNode(jsonCity.cname));
  65. cityDom.appendChild(cityOption);
  66. }
  67. }
  68. function getCityFail(xhr) {
  69. }
  70. // 实现城镇的操作
  71. cityDom.onchange = function() {
  72. var cid = this.value;
  73. // 判断是否需要查询的操作
  74. if (cid != -1) {
  75. // 发送ajax请求
  76. var url = "./csdn/CountryAction_select.action?time="
  77. + new Date().getTime();
  78. var content = "cid=" + cid;
  79. sendPost(content, url, getcountrySuccess, getcountryFail);
  80. }
  81. };
  82. function getcountrySuccess(xhr) {
  83. // 清空数据:城镇
  84. countryDom.length = 1;
  85. var countryObj = eval("(" + xhr.responseText + ")");
  86. var jsonCountries = countryObj.countries;
  87. for ( var i = 0; i < jsonCountries.length; i++) {
  88. var jsonCountry = jsonCountries[i];
  89. var countryOption = document.createElement("option");
  90. countryOption.setAttribute("value", jsonCountry.tid);
  91. countryOption.appendChild(document
  92. .createTextNode(jsonCountry.tname));
  93. countryDom.appendChild(countryOption);
  94. }
  95. }
  96. function getcountryFail(xhr) {
  97. alert("获取城镇失败!");
  98. }
  99. };
  100. Util.js:工具js,封装一些ajax的请求方法以及创建ajax的方法还有模拟jQuery的根据id获取dom对象
  101. //通过id获取dom对象
  102. function $(id) {
  103. return document.getElementById(id);
  104. }
  105. // ajax技术必须创建XMLHTTPRequest对象 ,获取XMLHTTPRequest对象的操作
  106. function createXHR() {
  107. var xhr;
  108. var aVersion = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
  109. "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];
  110. try {
  111. // 高版本ie、firefox、opera等浏览器直接new出ajax对象
  112. xhr = new XMLHttpRequest();
  113. } catch (e) {
  114. // 低版本的IE,ie6以下版本需要通过以下操作创建ajax对象
  115. for ( var i = 0; i < aVersion.length; i++) {
  116. try {
  117. xhr = new ActiveXObject(aVersion[i]);
  118. return xhr;
  119. } catch (e) {
  120. continue;
  121. }
  122. }
  123. }
  124. return xhr;
  125. }
  126. //post方式发送请求的方法
  127. function sendPost(content, url, success, fail) {
  128. var xhr = createXHR();
  129. // 触发器
  130. xhr.onreadystatechange = function() {
  131. if (xhr.readyState == 4) {
  132. if (xhr.status == 200 || xhr.status == 304) {
  133. success(xhr);
  134. } else {
  135. fail(xhr);
  136. }
  137. }
  138. };
  139. // 打开请求
  140. xhr.open("POST", url, true);
  141. // 设置类型
  142. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  143. // 发送请求
  144. xhr.send(content);
  145. }
  146. //get方式发送请求的方法
  147. function sendGet(content, url, success, fail) {
  148. var xhr = createXHR();
  149. // 触发器
  150. xhr.onreadystatechange = function() {
  151. if (xhr.readyState == 4) {
  152. if (xhr.status == 200 || xhr.status == 304) {
  153. success(xhr);
  154. } else {
  155. fail(xhr);
  156. }
  157. }
  158. };
  159. // 打开请求
  160. xhr.open("GET", url+"?"+content, true);
  161. // 发送请求
  162. xhr.send(null);
  163. }
  164. Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作,从而达到解决多表级联操作的时候经常出现的session已关闭的bug
  165. <?xml version="1.0" encoding="UTF-8"?>
  166. <!DOCTYPE struts PUBLIC
  167. "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
  168. "http://struts.apache.org/dtds/struts-2.3.dtd">
  169. <struts>
  170. <include file="www/csdn/project/resource/struts-constant.xml" />
  171. <package name="csdn" namespace="/csdn" extends="json-default">
  172. <action name="ProvinceAction_*" class="www.csdn.project.action.ProvinceAction"
  173. method="{1}">
  174. <result type="json">
  175. <!-- 改配置参数为关键,如果不设置改参数json对象会默认加载城市类导致出现session已关闭的错误 -->
  176. <param name="includeProperties">provinces\[\d+\]\.pid,provinces\[\d+\]\.pname</param>
  177. </result>
  178. <result name="input">/index.jsp</result>
  179. </action>
  180. <action name="CityAction_*" class="www.csdn.project.action.CityAction"
  181. method="{1}">
  182. <result type="json">
  183. <param name="includeProperties">cities\[\d+\]\.cid,cities\[\d+\]\.cname</param>
  184. </result>
  185. <result name="input">/index.jsp</result>
  186. </action>
  187. <action name="CountryAction_*" class="www.csdn.project.action.CountryAction"
  188. method="{1}">
  189. <result type="json">
  190. <param name="includeProperties">countries\[\d+\]\.tid,countries\[\d+\]\.tname</param>
  191. </result>
  192. <result name="input">/index.jsp</result>
  193. </action>
  194. </package>
  195. </struts>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值