zoukankan      html  css  js  c++  java

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

    看网上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="<%=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="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="+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="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=0>==请选择==</option>");  
    58.             $(".town option").remove();  
    59.             $(".town").append("<option value=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="+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=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="+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连接数据库的的配置文件也不贴出了.

    表述的可能有些不好,希望能帮初学者一点小小的忙吧.有什么建议,希望大家指出.小弟感激不尽.
    版权所有,转载请注明出处.
  • 相关阅读:
    DS博客作业02--栈和队列
    指针
    C语言博客作业04--数组
    函数
    留言板
    第三周-自主学习任务-面向对象基础与类的识别
    DS博客作业05--查找
    DS博客作业04--图
    DS博客作业03--树
    DS博客作业02--栈和队列
  • 原文地址：https://www.cnblogs.com/lvk618/p/4096054.html
Copyright © 2011-2022 走看看