`
issun
  • 浏览: 11013 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类

2008-01-12 | 用dwr封装表单项提交表单

    博客分类:
  • ajax
阅读更多
首先,配置dwr环境,网上很多资料都说得很详细,这里就不写了。
dwr封装form表单项,需要用到dwr定义的一个js方法:DWRUtil.getValues(yourform),这个方法可以返回一个指定form中的表单项的名称和值的map对象。
例如:
<form name="myform">
<input type="text" name="userName" id="userName"/>
<input type="password" name="passWord" name="passWord"/>
</form>
那么DWRUtil.getValues("myform")将返回该form中的表单项的一个map对象。就不需要再写document.myform.username.value这样的语句了。
我们可以通过dwr将这个自动封装好的表单对象返传给服务器端相关方法进行操作。如果需要的话,还可以在服务器端定义好对应的formbean来接收这个表单map。
下面具体操作:

1.配置好dwr运行环境。网上有很多例子,dwr所带的文档里也有说明。

2.写一个formbean来接收表单,必须有对应的set、get方法:
package dwr.test;
public class FormBean {
 private String userName;
 private String passWord;
 public String getPassWord() {
  return passWord;
 }
 public void setPassWord(String passWord) {
  this.passWord = passWord;
 }
 public String getUserName() {
  return userName;
 }
 public void setUserName(String userName) {
  this.userName = userName;
 }
}


3再写一个类来处理客户端发来的ajax请求:
package dwr.test;
import java.util.Map;
import org.apache.commons.beanutils.BeanUtils;
public class Service {
 public FormBean getFormBean(Map formMap){
  FormBean formBean = new FormBean();
  try{
   BeanUtils.populate(formBean, formMap);
  }catch(Exception e){
   e.printStackTrace();
  }
  System.out.println("==============客户端传来的信息==============");
  System.out.println("FormBean.username:"+formBean.getUserName());
  System.out.println("FormBean.password:"+formBean.getPassWord());
  System.out.println("=========================================");
  
  return formBean;
 }
}

其中用到的BeanUtils.populate(formBean, formMap)方法可以将formMap内的对象复制给formBean对象的属性。
BeanUtils类在struts库所带的包commons-beanutils.jar中。这样,来自客户端的表单项的值就被封装到服务器端的formBean中了,之后,操
作formBean就可以了。为了证实结果,用return formBean把封装后的表单内容返回到客户端。

4.在dwr.xml中注册相关的类及方法。
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
  <allow>
<convert converter="bean" match="dwr.test.FormBean"/>
    <create creator="new" javascript="Service">
    <param name="class" value="dwr.test.Service"/>
  <include method="getFormBean"/>
 </create>   
  </allow>
</dwr>

注册FormBean是让客户端能够识别服务端返回的FormBean型数据

5.编写测试页面:test.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    
  </head>
   <script src='./dwr/interface/Service.js'></script>
        <script src='./dwr/engine.js'></script>
        <script src='./dwr/util.js'></script>
       <script>
  function formsubmit(){
         var formMap  = DWRUtil.getValues("testform");
         alert("客户端读取到的表单项:\nuserName:"+formMap["userName"]+"\npassWord:"+formMap["passWord"]);
         Service.getFormBean(result,formMap);
        }
        function result(data)
        {
   alert("从服务端返回的数据:\nuserName:"+data.userName+"\npassWord:"+data.userName);
        }
   </script>
  <body>
          <form name="testform">
          userName:<input id="userName" name="userName" type="text"/><br/>
          passWord:<input id="passWord" name="passWord" type="password" /><br/>
          
          </form>
         <input type="button" value="submit" onClick="formsubmit()"/>
  </body>
</html>

注意:表单中的表单项的id的大小写必须和FormBean中定义的一致
分享到:
评论

相关推荐

    Dwr 表单提交 时间类型

    标题 "Dwr 表单提交 时间类型" 涉及的是Direct Web Remoting (DWR)框架中的一个关键概念,即如何处理表单提交时的时间数据类型。DWR是一种允许JavaScript与服务器端Java代码进行交互的技术,使得Web应用能够实现动态...

    服务器端ajax框架--------DWR实践总结

    在项目实践中,DWR常用于实时数据显示、表单验证、动态表格填充等场景。例如,一个简单的使用DWR实现的搜索功能,用户输入关键字后,服务器端通过DWR接收到请求,查询数据库,然后将结果返回给前端,更新搜索结果...

    ---------DWR中文文档

    Direct Web Remoting (DWR) 是一个开源Java库,它允许Web应用程序在客户端JavaScript和服务器端Java代码之间进行实时通信,无需使用XMLHttpRequest或JSONP等传统Ajax技术。DWR通过提供一套简单易用的API,使得开发...

    dwr.jar/dwr-2.0.5-src.zip/dwr.zip

    这个资源包包含了DWR的jar文件和源代码,可以帮助开发者深入了解并使用DWR框架。 1. **DWR.jar**: 这是DWR的核心库文件,包含了运行DWR所需的所有类和资源。当你在项目中引入dwr.jar,你可以使用DWR提供的API来...

    DWR数据推送封装的demo

    这个“DWR数据推送封装的demo”提供了一个示例,展示了如何利用DWR来封装并处理多种类型的数据推送,从而实现更加高效、灵活的页面交互。 DWR的核心功能在于它允许JavaScript在浏览器端直接调用服务器端的Java方法...

    dwr配置文件详解 dwr.xml配置文件详解

    dwr配置文件详解 dwr.xml配置文件详解 dwr配置文件是Direct Web Remoting(DWR)的核心组件之一,它负责配置DWR的各种设置和参数。在本文中,我们将详细介绍dwr配置文件的结构和配置方法,并探讨它在实际应用中的...

    整理好的DWR-2.0.5-src

    这个不是我的原创,原文件出至这里:...原资源包含了,源代码和API Doc,只是美中不足的是没有整理成可用的zip文档,我这特分离了一下,并重新打好包了,初步测试了一下能用。

    ssh-dwr.rar_cxf_dwr_dwr stru_spring dwr_ssh购物车

    在IT行业中,SSH-DWR是一种常见的技术组合,用于构建高效且功能丰富的Web应用程序。SSH代表Spring、Struts和Hibernate,这三个框架分别负责控制层、视图层和持久层的管理,而DWR(Direct Web Remoting)则是一个...

    DWR电子表单

    DWR电子表单是利用DWR技术构建的一种交互式、动态的Web表单,它可以极大地提升用户体验,使用户能够在不离开当前页面的情况下提交数据、获取服务器反馈,并进行实时更新。 在DWR电子表单中,用户可以直接在浏览器上...

    DWR中文文档DWR

    DWR(Direct Web Remoting)是一种Java库,它允许JavaScript在客户端与服务器端进行直接的交互,从而实现在Web应用程序中的Ajax功能。DWR的主要目标是简化前后端的数据交换,提高用户体验,使得Web应用能够像桌面...

    DWR集合Spring实现异步提交

    **DWR(Direct Web Remoting)集合Spring实现异步提交** DWR(Direct Web Remoting)是一种开源JavaScript库,它允许Web应用程序在客户端与服务器之间进行实时、双向通信,从而实现异步数据交换。结合Spring框架,...

    dwr-demo.rar_DEMO_DWR DE_dwr Demo_list set map

    在这个"DWR Demo"中,我们将会探讨如何使用DWR框架来处理和展示常见的数据结构,如List、Set和Map。 首先,让我们深入了解DWR的核心功能。DWR允许Java方法直接被JavaScript调用,就像它们是本地函数一样,无需手动...

    commons-logging-1.1.1+dwr

    commons-logging-1.1.1.jar 与 dwr.jar 配合使用 前后端通信 commons-logging-1.1.1.jar 与 dwr.jar 配合使用 前后端通信 commons-logging-1.1.1.jar 与 dwr.jar 配合使用 前后端通信

    dwr入门 -- 01 -- Hello Word

    DWR通过一系列的转换和封装,实现了浏览器与服务器之间的跨域通信,支持多种数据类型交换,包括基本类型、对象和数组等。 ### 二、环境准备 在开始之前,确保你已经安装了以下软件: 1. **JDK**:DWR需要Java环境...

    DWR的配置和传值DWR的配置和传值

    Direct Web Remoting (DWR) 是一个开源的Java库,允许在Web应用程序中实现Ajax功能,即在客户端JavaScript和服务器端Java之间进行实时通信。DWR简化了这个过程,使得开发者无需处理底层的HTTP请求和响应,而是可以...

    DWR 处理各种form表单

    讲解DWR 框架的使用,和各种form表单Select-option,table

    dwr-1.13.jar及dwr.xml

    dwr-1.1.3.jar及dwr.xml. dwr-1.1.3与dwr-2.0的dwr.xml略有区别: dwr-1.1.3 &lt;!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" ...

    dwr,jar和dwr-noncla.jar

    Direct Web Remoting (DWR) 是一个开源Java库,它允许在Web应用程序中轻松地进行JavaScript和服务器端Java代码之间的交互。DWR使得AJAX(Asynchronous JavaScript and XML)开发更为简便,允许开发者在不刷新整个...

Global site tag (gtag.js) - Google Analytics