`

用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应用能够实现动态...

    DWR数据推送封装的demo

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

    DWR电子表单

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

    DWR集合Spring实现异步提交

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

    DWR 处理各种form表单

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

    dwr.rar_dwr_java电子表单_电子表单

    标题中的“dwr.rar_dwr_java电子表单_电子表单”表明了这个压缩包主要包含与DWR(Direct Web Remoting)相关的Java电子表单开发资料。DWR是一款开源JavaScript库,它允许在Web浏览器和Java服务器之间进行实时、双向...

    dwr dwrdwr

    dwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwr

    DWR中文文档DWR

    - 该中文文档将详细介绍DWR的安装、配置、使用方法以及常见问题的解决,是学习DWR的重要参考资料。 通过深入学习这份DWR中文文档,开发者不仅可以掌握DWR的基本用法,还能了解到如何在实际项目中有效利用DWR提升...

    dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架

    dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架

    ajax封装报dwr

    总的来说,DWR提供了一种高效且易于使用的Ajax封装,通过简单的配置和少量的代码,就能实现复杂的数据交互。对于快速开发动态Web应用,特别是那些需要实时更新数据的应用,DWR是一个非常有价值的工具。在项目中正确...

    DWR 处理各种form表单Selectoption,table.doc

    在使用 DWR 处理各种 form 表单 Select/option 和 table 时,需要注意以下几点: * IE5.0 不支持 $() 函数,需要使用 document.getElementById 替代。 * 在更新 select 时,需要保存原来的数据,否则会丢失原来的...

    dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;

    dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;

    DWR 视频教程 使用DWR开发AJAX For JavaEE

    9. **实战项目**:“[浪曦原创]零散视频三 使用DWR开发AJAX For J2EE(JustCode).wrf”可能是一个实际操作视频,详细演示如何使用DWR构建一个简单的AJAX应用,通过观看可以加深对上述理论知识的理解。 10. **资源...

    dwr demo dwr简单使用

    在"Dwr demo - Dwr简单使用"这个项目中,你可以通过以下步骤了解和学习DWR的基本用法: 1. **环境准备**:首先确保你有Eclipse IDE,并且已经安装了Java Development Kit (JDK)。由于DWR是一个Java库,所以你需要一...

    dwr笔记 dwr自学资料

    例如,使用DWR可以实现异步表格数据加载、动态图表绘制、复杂表单的验证等功能,提高Web应用的性能和交互性。 总结来说,DWR是一种强大的工具,能够帮助开发者构建出更加高效、响应式的Web应用。通过学习和掌握DWR...

    简单使用dwr完整例子

    在这个"简单使用DWR完整例子"中,我们将深入理解DWR的基本概念、配置、以及如何在SSH(Spring、Struts、Hibernate)技术框架下集成和应用DWR。 首先,了解DWR的核心概念至关重要。DWR通过JavaScript API使得Java...

    DWR框架DWR框架

    例如,在压缩包内的文件"A051]使用DWR开发AJAX+For+J2EE.wrf"可能是一个演示或者教程,详细介绍了如何使用DWR框架在J2EE环境中构建AJAX应用。这个文件可能涵盖从安装DWR,配置web.xml,编写可远程调用的Java类,到在...

    用dwr做的上传下载

    4. **前端HTML和JavaScript**:创建一个HTML表单,包含文件输入字段,使用JavaScript监听表单提交事件,通过DWR调用`FileUploadService.uploadFile`方法来发送文件数据。 5. **处理文件**:在服务器端的`uploadFile...

    dwr经典实例(9个常用实例)

    - 表单数据提交:演示如何使用DWR无刷新地提交表单并处理服务器响应。 - 对象交互:展示如何在JavaScript和Java对象之间传递复杂的数据结构。 - 多方法调用:演示如何一次调用多个服务器端方法。 - 错误处理:展示...

    DWR技术文档、快速使用DWR、java技术

    **DWR(Direct Web Remoting)技术文档** DWR,全称Direct Web Remoting,是一种在Web应用程序中实现...通过理解其核心功能、配置步骤以及使用流程,开发者可以快速地在项目中引入DWR,构建高效、动态的Web应用。

Global site tag (gtag.js) - Google Analytics