注:这个实例只提交简单的数据,如基本数据类型。
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
相关推荐
标题 "Dwr 表单提交 时间类型" 涉及的是Direct Web Remoting (DWR)框架中的一个关键概念,即如何处理表单提交时的时间数据类型。DWR是一种允许JavaScript与服务器端Java代码进行交互的技术,使得Web应用能够实现动态...
- **LiveForm**:实时更新表单数据,无需提交即可看到结果。 - **逆向Ajax (Reverse Ajax)**:使服务器可以主动向客户端推送数据。 4. **设置DWR** 设置DWR通常包括以下步骤: - 添加DWR的JAR包到项目的类路径...
3. **复杂表单处理**:在涉及大量数据输入和验证的表单处理中,DWR可以实现即时验证,提高数据提交的准确性和效率。 4. **多媒体应用**:如视频播放器、在线游戏等,DWR可以帮助处理后台的媒体数据流,增强用户体验...
4. **表单验证**:在客户端提交表单前进行服务器端验证,提高用户体验。 ### 进阶知识 - DWR的Caching功能:DWR支持缓存,可以减少不必要的服务器请求,提高性能。 - DWR的Batching:批量处理多个请求,减少网络...
在DWR电子表单中,用户可以直接在浏览器上填写、编辑和提交表单,而服务器端可以实时处理这些数据并返回结果。这种双向通信机制使得Web应用更接近桌面应用的交互体验,提高了用户的工作效率。 DWR的核心功能包括: ...
- 表单验证:前端表单数据可以即时提交到后端验证,无需刷新页面。 - 动态UI交互:如拖放功能、图表实时更新等。 6. **压缩包内的文件**: - 可能包含`dwr-engine.js`,这是DWR的核心JavaScript库。 - `dwr-...
- **动态表单验证**:在用户填写表单时,立即检查输入的有效性,无需等待表单提交。 - **实时数据更新**:如股票报价、天气预报等信息的即时刷新。 - **富Internet应用程序(RIA)**:增强网页的交互性和用户体验,...
DWR会将jsp页面上的表单数据通过Ajax方式提交到这个`LoginService`,然后返回验证结果。由于描述中提到没有连接数据库,验证可能是基于硬编码的用户名和密码,或者简单的逻辑检查。 在jsp页面部分,`<dwr>`标签用于...
2. **动态表单**:用户输入的数据可以立即在页面上验证和处理,无需提交表单。 3. **富互联网应用**(RIA):构建具有桌面应用交互体验的Web应用。 **压缩包中的"dwrdemo"可能是:** - 一个包含DWR配置文件(如dwr....
- **表单验证**:在提交之前,客户端就可进行数据验证,提高用户体验。 - **页面组件的异步操作**:如文件上传、表格排序、图表刷新等。 通过学习"DWRchinese.pdf"并实际操作"dwr.jar",你将能够掌握DWR的精髓,...
- 表单验证:前端表单验证失败时,可以通过DWR直接调用后端验证逻辑,无需提交整个表单。 - 动态内容加载:如侧边栏、下拉菜单等内容的动态加载。 - 图形和图表的实时更新:在数据分析应用中,可以通过DWR实现实时...
通过分析和运行这些示例,你可以更深入地理解如何利用DWR实现动态Web交互,例如实时数据更新、异步表单提交、动态图表生成等。 总的来说,DWR是一个强大的工具,它简化了Ajax开发,让Web应用更加生动、交互性更强。...
- 表单数据提交:演示如何使用DWR无刷新地提交表单并处理服务器响应。 - 对象交互:展示如何在JavaScript和Java对象之间传递复杂的数据结构。 - 多方法调用:演示如何一次调用多个服务器端方法。 - 错误处理:展示...
DWR在文件上传中的作用是提供了一种在浏览器端与服务器端进行实时通信的方式,用户可以在前端选择文件后,通过DWR调用服务器端的方法,将文件数据发送到服务器。DWR使用JSON或XML格式传递数据,这样可以实现实时反馈...
DWR常用于构建富互联网应用(RIA),例如实时聊天、在线协作工具、动态表单提交等场景。其优点在于简化了Ajax开发,减少了跨域问题,并且提供了错误处理和调试支持。 综上所述,Java借助DWR框架实现Ajax通信,能够...
- 数据验证:前端表单提交前,利用DWR调用后端服务进行数据校验。 - 用户交互:如在线聊天、拖放操作、实时编辑等。 - 动态加载内容:如分页加载、异步加载更多数据等。 通过学习和实践Spring与DWR的整合,开发者...
5. **实例分析**:教程可能包含多个实例,涵盖了DWR的基本用法和常见应用场景,如表单数据提交、动态更新页面部分、以及与Ajax的集成等。源代码可以帮助读者更好地理解理论知识并进行实践操作。 6. **DWR与其他技术...
3. **表单验证**:在客户端提交表单前,DWR调用服务器端验证方法,提供实时反馈。 【DWR与Struts、Spring集成】 DWR可以轻松地与流行的Java框架如Struts和Spring集成。在Struts中,DWR可以作为Action的补充,提供...
13. Submission box:用于提交表单。 在使用 DWR 处理各种 form 表单 Select/option 和 table 时,需要注意以下几点: * IE5.0 不支持 $() 函数,需要使用 document.getElementById 替代。 * 在更新 select 时,...