Hibernate+DWR无刷新三级联动

最新推荐文章于 2025-08-13 22:02:33 发布

java小酱油啊

最新推荐文章于 2025-08-13 22:02:33 发布

阅读量985

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax dwr hibernate 开源框架 jsp

本文链接：https://blog.youkuaiyun.com/luckey_zh/article/details/22998631

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于DWR框架实现的三级联动示例，包括前端页面与后端交互的具体实现方式，展示了如何通过Ajax技术完成省市区选择联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

DWR是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，就像它就在浏览器里一样。看代码吧.

使用DWR必须先加DWR的jar包.我这使用的是2.0.5

index.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ajax三级联动</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<!-- 导入DWR 为Java 对象动态生成的JavaScript 文件-->
<script type="text/javascript" src="dwr/interface/mydwr.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script></head>
<script type="text/javascript">
	$(function(){
		mydwr.findProvince(function(pro){
			for(var i=0;i<pro.length;i++){
				$(".province").append("<option value="+pro[i].id+">"+pro[i].province+"</option>");
			}
		});
	});

</script> 
  <body>
    	省：<select name="province" class="province">
    		<option value="0">==请选择==</option>
   		   </select>
    	市：<select name="city" class="city">
    		<option>==请选择==</option>
    		</select>
    	区：<select name="town" class="town">
    		<option>==请选择==</option>
    		</select>
  </body>
  <script type="text/javascript">
  	$(".province").change(function(){
  		if($(".province").val()==0){
  			$(".city option").remove();
  			$(".city").append("<option value=0>==请选择==</option>");
			$(".town option").remove();
  			$(".town").append("<option value=0>==请选择==</option>");
  			return;
  		}
		mydwr.findCityById($(this).val(),function(city){
			$(".city option").remove();
			$(".city").append("<option value=0>==请选择==</option>");
			for(var i=0;i<city.length;i++){
				$(".city").append("<option value="+city[i].id+">"+city[i].city+"</option>");
			}
		});
	});
  	$(".city").change(function(){
  		if($(".city").val()==0){
  			$(".town option").remove();
  			$(".town").append("<option value=0>==请选择==</option>");
  			return;
  		} 
		mydwr.findTownById($(this).val(),function(town){
			$(".town option").remove();
			$(".town").append("<option value=0>==请选择==</option>");
			for(var i=0;i<town.length;i++){
				$(".town").append("<option value="+town[i].id+">"+town[i].town+"</option>");
			}
		});
	});
  </script>
</html>

三个实体类:

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

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

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

dao类

package cn.yo.dao;  
  
import java.util.List;  
import org.hibernate.Session;  
import cn.yo.entity.City;  
import cn.yo.entity.Province;  
import cn.yo.entity.Town;  
  
public class ProvinceDao {  
    //查询全部省  
    public List<Province> findProvince(){  
        Session session=HibernateSessionFactory.getSession();  
        String hql="from Province";  
        List<Province> province=session.createQuery(hql).list();  
        if(province.size()>0){  
            return province;  
        }  
        else{  
            return null;  
        }  
    }  
    //根据省的Id查询该省下的全部市  
    public List<City> findCityById(int id){  
        Session session=HibernateSessionFactory.getSession();  
        String hql="from City c where c.province.id='"+id+"'";  
        List<City> city=session.createQuery(hql).list();  
        if(city.size()>0){  
            return city;  
        }else{  
            return null;  
        }  
    }  
    //根据市的Id查询该市下的全部镇  
    public List<Town> findTownById(int id){  
        Session session=HibernateSessionFactory.getSession();  
        String hql="from Town t where t.city='"+id+"'";  
        List<Town> town=session.createQuery(hql).list();  
        if(town.size()>0){  
            return town;  
        }else{  
            return null;  
        }  
    }  
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
    <!-- DWR -->
  <servlet>
  	<servlet-name>dwr_invoker</servlet-name>
  	<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  	<init-param>
  		<param-name>debug</param-name>
  		<param-value>true</param-value>
  	</init-param>
  	 <init-param>
             <param-name>crossDomainSessionSecurity</param-name>
             <param-value>false</param-value>
      </init-param>
      <init-param>
            <param-name>allowScriptTagRemoting</param-name>
            <param-value>true</param-value>
      </init-param>
  	
  </servlet>
  <servlet-mapping>
  	<servlet-name>dwr_invoker</servlet-name>
  	<url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
</web-app>