dwr学习（二）：提交简单的表单数据

原创于 2016-11-29 16:35:47 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dwr #提交表单数据

dwr 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用DWR实现的简单表单提交案例，包括前端表单设计、DWR配置、JavaScript调用及后台数据处理流程。通过该案例，读者可以了解如何从前端收集表单数据并将其发送到后端进行处理。

注：这个实例只提交简单的数据，如基本数据类型。

1、基本页面结构：

<body>
	提交表单数据:
	<form name="dwrForm"> 
		<p>用户名：<input type="text" name="userName"/></p> 
		<p>密码：<input type="password" name="passWord"/></p> 
		<p>年龄： <input type="text" name="age"/></p>
		<p>生日： <input type="text" name="birthday"/></p> 
		<input type="button" value="提交" onclick="submitFormData();" />
	</form> 
 </body>

2、dwr配置：

<convert converter="bean" match="com.wjl.test.SUser" ></convert>
<create creator="new" javascript="Service">
	<param name="class" value="com.wjl.test.Services" />
	<include method="getUser"/>
</create>

3、调用js与后台进行交互：

function submitFormData(){
	//1、获取表单数据
	var formMap = dwr.util.getValues("dwrForm"); 
	//alert(formMap);
       alert("客户端读取到的表单项：\n用户名:"+formMap["userName"]+"\n密码:"+formMap["passWord"]+"\n年龄:"+formMap["age"]+"\n生日:"+formMap["birthday"]);
       
       //2、传递到后台
       Service.getUser(formMap,function(result){
       	alert("从服务端返回的数据：\n用户名:"+result.userName+"\n密码:"+result.passWord+"\n年龄:"+result.age+"\n生日:"+result.birthday); 
       });
}

4、后台数据处理：

user实体类：

public class SUser {
	private String userName; 
	private String passWord;
	private int age;
	private String birthday;
	
	//getter、setter方法
}

services类：

import java.util.Map;
import com.sun.org.apache.commons.beanutils.BeanUtils;
public class Services {
	public SUser getUser(Map formMap){
		 SUser user = new SUser(); 
		  try{ 
		   BeanUtils.populate(user, formMap); 
		  }catch(Exception e){ 
		   e.printStackTrace(); 
		  } 
		  System.out.println("==============客户端传来的信息=============="); 
		  System.out.println("FormBean.username:"+user.getUserName()); 
		  System.out.println("FormBean.password:"+user.getPassWord()); 
		  System.out.println("FormBean.age:"+user.getAge()); 
		  System.out.println("FormBean.birthday:"+user.getBirthday()); 
		  System.out.println("========================================="); 
		  return user; 
	}
}

PS：为什么只是简单的数据类型，因为复杂的数据会报错。

如最开始的设想，将birthday属性设置为Date类型，提交数据也严格遵守时间格式，结果报错：

java.lang.IllegalArgumentException: argument type mismatch