Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动

看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度。小弟自己写了一个，可能有些地方不是很好，希望大家能够提出建议。

用的是Hibernate+struts2写的。http://blog.csdn.net/luckey_zh/article/details/22995389

以代码来说话吧。

首先是index1.jsp页面

[html] view plaincopy

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>Jquery-ajax三级联动</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  17. </head>
  18. <script type="text/javascript">
  19. <!--页面加载时首先获得省-->
  20. $(function(){
  21. $.ajax({
  22. type:"post",
  23. url:"province",
  24. dataType:"json",
  25. async:false,
  26. success:function(data){
  27. var pro=eval("("+data+")");
  28. for(var i=0;i<pro.length;i++){
  29. $(".province").append("<option value="+pro[i].id+">"+pro[i].province+"</option>");
  30. }
  31. }
  32. });
  33. });
  34. </script>
  35. <body>
  36. 省：<select name="province" class="province">
  37. <option value="0">==请选择==</option>
  38. </select>
  39. 市：<select name="city" class="city">
  40. <option>==请选择==</option>
  41. </select>
  42. 区：<select name="town" class="town">
  43. <option>==请选择==</option>
  44. </select>
  45. </body>
  46. <script type="text/javascript">
  47. <!--省下拉列表框发生改变时候的事件-->
  48. $(".province").change(function(){
  49. var province_id=$(".province").val();
  50. //如果选择的是‘==请选择==’，不会执行去查找市，平且把已有的数据清空
  51. if($(".province").val()==0){
  52. $(".city option").remove();
  53. $(".city").append("<option value=0>==请选择==</option>");
  54. $(".town option").remove();
  55. $(".town").append("<option value=0>==请选择==</option>");
  56. return;
  57. }
  58. $.ajax({
  59. type:"post",
  60. //传一个省的id参数
  61. url:"city?province_id="+province_id,
  62. dataType:"json",
  63. async:false,
  64. success:function(city){
  65. var city=eval("("+city+")");
  66. for(var i=0;i<city.length;i++){
  67. $(".city").append("<option value="+city[i].id+">"+city[i].city+"</option>");
  68. }
  69. }
  70. });
  71. });
  72. //市下拉列表框发生改变时候的事件
  73. $(".city").change(function(){
  74. var city_id=$(".city").val();
  75. if($(".city").val()==0){
  76. $(".town option").remove();
  77. $(".town").append("<option value=0>==请选择==</option>");
  78. return;
  79. }
  80. $.ajax({
  81. type:"post",
  82. url:"town?city_id="+city_id,
  83. dataType:"json",
  84. async:false,
  85. success:function(town){
  86. var town=eval("("+town+")");
  87. for(var i=0;i<town.length;i++){
  88. $(".town").append("<option value="+town[i].id+">"+town[i].town+"</option>");
  89. }
  90. }
  91. });
  92. });
  93. </script>
  94. </html>

三个实体类：

1.Province实体类

[html] view plaincopy

  1. package cn.yo.entity;
  2. import java.util.HashSet;
  3. import java.util.Set;
  4. public class Province implements java.io.Serializable {
  5. private Integer id;
  6. private String province;
  7. private Set cities = new HashSet(0);
  8. //省略了get,set方法

2.City实体类

[html] view plaincopy

  1. package cn.yo.entity;
  2. import java.util.HashSet;
  3. import java.util.Set;
  4. public class City implements java.io.Serializable {
  5. private Integer id;
  6. private Province province;
  7. private String city;
  8. private Set towns = new HashSet(0);
  9. //省略了get,set方法

3.Town实体类

[html] view plaincopy

  1. package cn.yo.entity;
  2. public class Town implements java.io.Serializable {
  3. private Integer id;
  4. private City city;
  5. private String town;
  6. //省略了get,set方法

本人比较懒，用的是Hibernate框架，HibernateSessionFactory这个类大家会用Hibernate应该都会知道，我就不贴出了。

[html] view plaincopy

  1. package cn.yo.dao;
  2. import java.util.List;
  3. import org.hibernate.Session;
  4. import cn.yo.entity.City;
  5. import cn.yo.entity.Province;
  6. import cn.yo.entity.Town;
  7. public class ProvinceDao {
  8. //查询全部省
  9. public List<Province> findProvince(){
  10. Session session=HibernateSessionFactory.getSession();
  11. String hql="from Province";
  12. List<Province> province=session.createQuery(hql).list();
  13. if(province.size()>0){
  14. return province;
  15. }
  16. else{
  17. return null;
  18. }
  19. }
  20. //根据省的Id查询该省下的全部市
  21. public List<City> findCityById(int id){
  22. Session session=HibernateSessionFactory.getSession();
  23. String hql="from City c where c.province.id=‘"+id+"‘";
  24. List<City> city=session.createQuery(hql).list();
  25. if(city.size()>0){
  26. return city;
  27. }else{
  28. return null;
  29. }
  30. }
  31. //根据市的Id查询该市下的全部镇
  32. public List<Town> findTownById(int id){
  33. Session session=HibernateSessionFactory.getSession();
  34. String hql="from Town t where t.city=‘"+id+"‘";
  35. List<Town> town=session.createQuery(hql).list();
  36. if(town.size()>0){
  37. return town;
  38. }else{
  39. return null;
  40. }
  41. }
  42. }

接下来是action类

[html] view plaincopy

  1. package cn.yo.action;
  2. import java.util.List;
  3. import org.apache.struts2.ServletActionContext;
  4. import net.sf.json.JSONArray;
  5. import net.sf.json.JsonConfig;
  6. import cn.yo.dao.ProvinceDao;
  7. import cn.yo.entity.City;
  8. import cn.yo.entity.Province;
  9. import cn.yo.entity.Town;
  10. import com.opensymphony.xwork2.ActionSupport;
  11. public class ProvinceAction extends ActionSupport {
  12. private String result;//返回到客户端的数据
  13. //省略get,set方法
  14. //获得省
  15. public String findProvince()throws Exception{
  16. ProvinceDao d=new ProvinceDao();
  17. List<Province> p=d.findProvince();
  18. System.out.println("------");
  19. JsonConfig config=new JsonConfig();
  20. //Hibernate中关联set需要过滤，不然会引起死循环。我在这吃了很大的亏，希望大家能重视
  21. config.setExcludes(new String[]{"cities"});
  22. //转化为JSON
  23. JSONArray jArray = JSONArray.fromObject(p,config);
  24. result=jArray.toString();
  25. return SUCCESS;
  26. }
  27. //获得城市
  28. public String findCity()throws Exception{
  29. ProvinceDao d=new ProvinceDao();
  30. int id=Integer.parseInt(ServletActionContext.getRequest().getParameter("province_id"));
  31. List<City> c=d.findCityById(id);
  32. JsonConfig config=new JsonConfig();
  33. config.setExcludes(new String[]{"province","towns"});
  34. JSONArray jArray=JSONArray.fromObject(c, config);
  35. result=jArray.toString();
  36. return SUCCESS;
  37. }
  38. //获得镇
  39. public String findTown()throws Exception{
  40. ProvinceDao d=new ProvinceDao();
  41. int id=Integer.parseInt(ServletActionContext.getRequest().getParameter("city_id"));
  42. List<Town> t=d.findTownById(id);
  43. JsonConfig config=new JsonConfig();
  44. config.setExcludes(new String[]{"city"});
  45. JSONArray jArray=JSONArray.fromObject(t,config);
  46. result=jArray.toString();
  47. return SUCCESS;
  48. }
  49. }

在看struts2的配置

[html] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
  3. <struts>
  4. <!--需要继承json-default-->
  5. <package name="myajax" namespace="/" extends="struts-default,json-default">
  6. <action name="province" class="cn.yo.action.ProvinceAction" method="findProvince">
  7. <!-- 返回json类型数据 -->
  8. <result type="json">
  9. <!--返回到客户端的result-->
  10. <param name="root">result</param>
  11. </result>
  12. </action>
  13. <action name="city" class="cn.yo.action.ProvinceAction" method="findCity">
  14. <!-- 返回json类型数据 -->
  15. <result type="json">
  16. <param name="root">result</param>
  17. </result>
  18. </action>
  19. <action name="town" class="cn.yo.action.ProvinceAction" method="findTown">
  20. <!-- 返回json类型数据 -->
  21. <result type="json">
  22. <param name="root">result</param>
  23. </result>
  24. </action>
  25. </package>
  26. </struts>

web.xml配置文件

[html] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5"
  3. xmlns="http://java.sun.com/xml/ns/javaee"
  4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  6. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  7. <welcome-file-list>
  8. <welcome-file>index.jsp</welcome-file>
  9. </welcome-file-list>
  10. <filter>
  11. <filter-name>struts2</filter-name>
  12. <filter-class>
  13. org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
  14. </filter-class>
  15. </filter>
  16. <filter-mapping>
  17. <filter-name>struts2</filter-name>
  18. <url-pattern>/*</url-pattern>
  19. </filter-mapping>
  20. </web-app>

好了,代码全部贴出,其中hibernate中实体类的配置文件,没什么大的变化,就不贴出了,Hibernate连接数据库的的配置文件也不贴出了.

表述的可能有些不好,希望能帮初学者一点小小的忙吧.有什么建议,希望大家指出.小弟感激不尽.
版权所有,转载请注明出处.

时间： 2024-10-26 10:52:22

Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动的相关文章

2017-6-6 Ajax版页面无刷新三级联动

实现效果: 页面代码: <div> <select id="sel1" style="width:100px;"> </select> <select id="sel2" style="width:100px;"> </select> <select id="sel3" style="width:100px;"> &

angularjs服务json文件实现省市区三级联动

最近刚做完一个项目,其中就有一功能点就是让用户填写信息时下拉选择省市区. 实现这个功能可以选择将全国的省市区数据全部存到数据库中,但是太复杂了,读取速度慢.每次都需要加载且对数据库造成负担,所以较为稳妥且简洁的方式就是将数据放在前端页面中. 其中,可以使用jQuery.angularjs或者将两者结合,本例将采用angularjs读取json文件的方式实现,其中将全部的省市区数据放在json文件中. 由于省市区json文件数据比较多,我们先展示效果,将代码放在后面与大家分享. 在此特别声明, 有

jquery 无刷新多级联动

原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 1 分公司: 2 <select id="SelectCom"> 3 <option value="">--请选择分公司-- </option> 4 </select> 5 电厂: 6 <select id="SelectORG"> 7 <o

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="renmai_PageTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

ajax分页2：jquery.pagination +JSON 动态无刷新分页

aspx 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

PHP + jQuery + Json 实现中国省市区三级联动

定义省市区结构的JSON文件代码: city.data.js: var cityData = [{ value: '110000', text: '北京市', children: [{ value: "110100", text: "北京市", children: [{ value: "110101", text: "东城区" }, { value: "110102", text: "西城区&qu

ASP.NET中使用DropDownList实现无刷新二级联动详细过程

Demo.sql 1 create table Car( 2 [id] int identity, 3 [brand] varchar(50) not null, 4 [type] varchar(50) not null 5 ) 6 go 7 8 insert into Car ([brand],[type])values('BMW','B'),('BMW','M'),('BMW','W'), 9 ('BENZ','B'),('BENZ','E'),('BENZ','N'),('BENZ','

jQuery+AJAX+Struts实现无刷新分页

jQuery+AJAX+Struts实现无刷新分页 说明: 1．需要jQuery插件js文件: 2．使用myeclipse添加struts能力: 从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后使用OPEN('GET/POST',URL,同步/异步)设置提交方式,URL地址,使用同步还是异步方式.然后使用send(data)向服务器发送数据,同时使用onreadystatechange来绑定回调函数.如果是使用GET方式提交数据,那么就

Ajax无刷新（二）三级联动

1 写一个公用页面 2 <% 3 String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath(); 4 System.out.println(path); 5 request.setAttribute("path",path); 6 %> 1 其他页面需要绝对路径的话