我用DWR做了一个级联选择的例子,希望能给你带来方便,谢谢!!!
web.xml----------
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<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>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>
initApplicationScopeCreatorsAtStartup
</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>maxWaitAfterWrite</param-name>
<param-value>500</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
dwr.xml---------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<convert converter="bean" match="com.dwr.CityBean"></convert>
<create creator="new" javascript="DWRHandle"
class="com.dwr.DwrHandle" scope="session">
<include method="getCityList" />
<include method="getProvinceList" />
</create>
<!--
<create creator="spring" javascript="DWRCategory">
<param name="beanName" value="DWRCategory"/>
</create>
-->
</allow>
</dwr>
hand.js-------------
//handle author ddh
function _load(){
DWRHandle.getProvinceList(loadCall);
}
//callback
function loadCall(data)
{
if(data)
{
var selects="<select id='province' onchange='showCity()'><option id='0' >省份</option>";
for(var i=0;i<data.length;i++)
{
selects=selects+"<option id='"+data[i].id+"'>"+data[i].name+"</option>";
}
selects=selects+"</select>";
//DWRUtil.setValue("proninceDiv",selects,true);
document.getElementById("proninceDiv").innerHTML=selects;
}
}
function showCity()
{
var provs=document.getElementById("province");
for(i=0;i<provs.options.length;i++)
{
if(provs.options[i].selected){
//alert(provs.options[i].id);
if(provs.options[i].id!=0){
DWRHandle.getCityList(provs.options[i].id,showCityCall);
}
}
}
}
//callback
function showCityCall(data)
{
if(data)
{
var selects="<select id='city' onchange='getCity()'><option id='0' >城市</option>";
for(var i=0;i<data.length;i++)
{
selects=selects+"<option id='"+data[i].id+"'>"+data[i].name+"</option>";
}
selects=selects+"</select>";
document.getElementById("cityDiv").innerHTML=selects;
}
}
function getCity()
{
var citys=document.getElementById("city");
for(i=0;i<citys.options.length;i++)
{
if(citys.options[i].selected){
alert(citys.options[i].innerHTML);
}
}
}
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>cascade page</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- import js -- author ddh -->
<script type='text/javascript' src='/CascadeofDWR/dwr/interface/DWRHandle.js'></script>
<script type='text/javascript' src='/CascadeofDWR/dwr/engine.js'></script>
<script type='text/javascript' src='/CascadeofDWR/dwr/util.js'></script>
<script type='text/javascript' src='js/handle.js'></script>
</head>
<body onload="_load();">
Welcome to here! <br>
<br/>
<table>
<tr><td> <div id="proninceDiv"></div></td><td><div id="cityDiv" /></td></tr>
</table>
</body>
</html>
其详细资料请看附件,谢谢。
分享到:
相关推荐
在这个特定的场景中,我们利用Ajax技术和Direct Web Remoting(DWR)框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验,因为它减少了用户手动刷新页面的需求,提供了流畅的交互。 首先,我们需要...
1. **配置DWR**:在web.xml中添加DWR的servlet配置,并创建对应的dwr-engine.xml和dwr-config.xml文件,定义允许暴露给前端的方法。 2. **创建后台服务**:在Spring中定义业务接口和服务实现,这些服务将被DWR调用...
- 设计关联表:为了实现级联效果,数据库中的相关表需要有合适的外键关联,比如省份表、城市表和区县表之间的层级关系。 3. **前端页面**: - HTML布局:创建包含三个下拉框的HTML页面,初始状态下只显示最顶层的...
例如,一级下拉框选择省份,二级下拉框选择城市,三级下拉框选择区县。这种联动效果可以提高用户体验,减少不必要的网络请求。 结合SSH和DWR实现三级联动的基本步骤如下: 1. **配置SSH框架**:首先,你需要在项目...
本篇文章将深入探讨如何利用DWR来实现一个两级级联菜单,并以SQL Server 2000数据库作为数据源。 首先,我们需要理解DWR的基本工作原理。DWR允许在后台执行Java方法并返回结果到前端,无需刷新整个页面。这种技术...
<servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*...
标题 "dwr入门 -- 03 -- 结合Spring" 指向的是一个关于Direct Web Remoting (DWR)框架如何与Spring框架整合的教程。DWR是一个Java库,允许在浏览器和服务器之间进行实时、双向通信,使得JavaScript可以直接调用Java...
在本项目中,我们将讨论如何利用DWR框架来实现级联效果,即一个下拉框的选项改变会影响到另一个下拉框的显示内容。 级联通常用于数据表单中,如地区选择,省份改变时城市会随之更新,城市改变时区县也会相应变化。...
<servlet-name>dwr-invoker</servlet-name> <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class> <init-param> <param-name>debug</param-name> <param-value>true...
本资料主要探讨的是如何将这三个框架进行集成,实现省份菜单的级联功能,即在前端选择省份时,对应的下拉菜单会动态加载出该省份的城市。 首先,Struts是一个MVC(Model-View-Controller)框架,它负责处理用户请求...
AJAX-DWR下拉框级联是Web开发中一种常见的交互设计,主要用于提高用户体验,使得用户在选择某个选项时,相关联的下拉框能够自动更新其内容,以适应不同的场景需求。在这个实验中,我们将重点探讨如何使用AJAX和DWR...
<servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <description></description> <param-name>debug</param-name> <param-value>true...
在级联菜单的情况下,当用户选择一个父级选项(如国家),DWR会调用后台服务获取对应的子级数据(如省份),然后在前端动态更新下拉菜单。 在"压缩包子文件的文件名称列表"中提到的"DwrMeunSe"可能是项目文件或源...
DWR(Direct Web Remoting)是一种JavaScript库,它允许在浏览器和服务器之间进行实时、安全的双向通信,从而实现Web应用中的Ajax功能。通过DWR,开发者可以在客户端JavaScript代码中直接调用服务器端Java方法,极大...
这个不是我的原创,原文件出至这里:...原资源包含了,源代码和API Doc,只是美中不足的是没有整理成可用的zip文档,我这特分离了一下,并重新打好包了,初步测试了一下能用。
DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在浏览器端与服务器端的Java对象进行交互,实现动态的Web应用。在"HelloWorld解释&&使用javabean"这个主题中,我们将深入理解DWR的基本概念、工作...
标题 "dwr省市区三级级联" 涉及到的是一个前端开发中的常见问题,即如何实现省市区的三级联动效果。这个标题暗示我们这是一个使用Direct Web Remoting (DWR) 技术来实现的功能,它允许JavaScript与服务器端Java代码...
这可能是一个重复的文件,或者包含了与dwr.jar和dwr-2.0.5-src.zip不同的内容,比如可能是DWR的配置文件、文档或者特定环境的构建版本。通常,这样的zip文件会包含部署所需的全部资源,包括Web应用的结构和配置文件...
2. **DWR Servlet**:声明一个名为`dwr-invoker`的Servlet,它会处理DWR的请求。在这里,你需要指定Servlet的类名`org.directwebremoting.servlet.DwrServlet`。 3. **DWR初始化参数**:设置DWR的一些配置参数,...
标题 "dwr2.0.2.jar + bsf-2.3.jar+xml-apis.jar" 暗示了这是一个关于Web应用程序开发中的某些组件的集合,主要涉及Direct Web Remoting (DWR) 和 Java脚本引擎接口。描述与标题相同,进一步确认了这可能是一个包含...