用dwr封装表单项提交表单 DWRUtil.getValues()方法一直无效

1 篇文章 0 订阅

在百度上搜索DWR表单提交,相信很多人都可以看到跟下文差不多的文章,但是按照其写法一直无法成功, DWRUtil.getValues()一直没有执行到,这是因为 DWRUtil未定义,所以要在DWRUtil.getValues()方法执行之前加上

if (typeof window['DWRUtil'] == 'undefined')
        window.DWRUtil = dwr.util; 

这样就可以了


很多人都转载的文章,错误的:

dwr封装表单项提交表单

关键字dwr封装表单项提交表单

首先,配置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来接收表单,必须有对应的setget方法: 

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中定义的一致


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值