首页 > 代码库 > Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动

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

2024-08-02 00:46:45   217人阅读

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

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

以代码来说话吧。

首先是index1.jsp页面

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

三个实体类：

1.Province实体类

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package cn.yo.entity;  
  2.   
  3. import java.util.HashSet;  
  4. import java.util.Set;  
  5.   
  6. public class Province implements java.io.Serializable {  
  7.   
  8.     private Integer id;  
  9.     private String province;  
  10.     private Set cities = new HashSet(0);  
  11.     //省略了get,set方法  

2.City实体类
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package cn.yo.entity;  
  2.   
  3. import java.util.HashSet;  
  4. import java.util.Set;  
  5.   
  6. public class City implements java.io.Serializable {  
  7.   
  8.     private Integer id;  
  9.     private Province province;  
  10.     private String city;  
  11.     private Set towns = new HashSet(0);  
  12.     //省略了get,set方法  

3.Town实体类
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package cn.yo.entity;  
  2.   
  3. public class Town implements java.io.Serializable {  
  4.   
  5.     private Integer id;  
  6.     private City city;  
  7.     private String town;  
  8.     //省略了get,set方法  
本人比较懒，用的是Hibernate框架，HibernateSessionFactory这个类大家会用Hibernate应该都会知道，我就不贴出了。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package cn.yo.dao;  
  2.   
  3. import java.util.List;  
  4. import org.hibernate.Session;  
  5. import cn.yo.entity.City;  
  6. import cn.yo.entity.Province;  
  7. import cn.yo.entity.Town;  
  8.   
  9. public class ProvinceDao {  
  10.     //查询全部省  
  11.     public List<Province> findProvince(){  
  12.         Session session=HibernateSessionFactory.getSession();  
  13.         String hql="from Province";  
  14.         List<Province> province=session.createQuery(hql).list();  
  15.         if(province.size()>0){  
  16.             return province;  
  17.         }  
  18.         else{  
  19.             return null;  
  20.         }  
  21.     }  
  22.     //根据省的Id查询该省下的全部市  
  23.     public List<City> findCityById(int id){  
  24.         Session session=HibernateSessionFactory.getSession();  
  25.         String hql="from City c where c.province.id=‘"+id+"‘";  
  26.         List<City> city=session.createQuery(hql).list();  
  27.         if(city.size()>0){  
  28.             return city;  
  29.         }else{  
  30.             return null;  
  31.         }  
  32.     }  
  33.     //根据市的Id查询该市下的全部镇  
  34.     public List<Town> findTownById(int id){  
  35.         Session session=HibernateSessionFactory.getSession();  
  36.         String hql="from Town t where t.city=‘"+id+"‘";  
  37.         List<Town> town=session.createQuery(hql).list();  
  38.         if(town.size()>0){  
  39.             return town;  
  40.         }else{  
  41.             return null;  
  42.         }  
  43.     }  
  44. }  

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

在看struts2的配置
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  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在CODE上查看代码片派生到我的代码片
  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连接数据库的的配置文件也不贴出了.

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

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


联系
我们