`
beckrabbit
  • 浏览: 129393 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

使用ext2的form提交表单（非AJAX方式）

AjaxEXTDWRjsonStruts 
阅读更多

虽然ext自带的ajax支持还是不错的，可我还是习惯用DWR来做AJAX，因为对于J2ee开发来说这无疑是最好的选择

ext的form提供了两种表单方式，一是ajax的另一种是非ajax的，前者要求服务端返回的数据一定要是json格式，这让我很不习惯，还是dwr的好...在这里用登录窗口的例子，说一下后者。

后台就不多说了，至少需要一个验证用户的service方法 boolean userlogin(String username,String password);

或者返回String类型给用户更详细的登录失败信息。

如果用Struts来做界面控制的话需要一个userlogin.do 获取form提交的username和password，调用service层的userlogin方法决定跳转的页面。

首先添加一个FORM，直接在JS里面写下面代码就可以生成一个FORM ，无需任何页面代码。

js 代码
  1. var simple = new Ext.form.FormPanel({
  3. labelWidth: 75, // label settings here cascade unless overridden
  4. url:'../userlogin.do',
  5. method:'POST',
  6. frame:true,
  7. title: '登录窗口',
  8. bodyStyle:'padding:5px 5px 0',
  9. width: 300,
  10. defaults: {width: 200},
  11. defaultType: 'textfield',
  12. //实现非AJAX提交表单一定要加下面的两行！
  13. onSubmit: Ext.emptyFn,
  14. submit: function() {
  15. //有疑问的地方
  16. this.getEl().dom.action='../userlogin.do';
  17. this.getEl().dom.submit();
  18. },
  19. items: [{
  20. fieldLabel: '用户名',
  21. id: 'username',
  22. allowBlank:false,
  23. width:150
  24. },{
  25. fieldLabel: '密码',
  26. id: 'password',
  27. allowBlank:false,
  28. width:150,
  29. inputType:'password'
  31. }
  32. ],
  33. buttons: [{
  34. text: '登录',
  35. type:'button',
  36. id:'login',
  37. handler: login
  38. },{
  39. text: '重置',
  40. type:'reset',
  41. id:'clear',
  42. handler: reset
  43. }
  44. ]
  45. });

这个就是ext2.0的form模型，使用了新的Ext.form.FormPanel做form，需要注意的是使用非ajax也就是传统方式的话一定要在form的属性加入这两行：

js 代码
  1. onSubmit: Ext.emptyFn,
  3. submit: function() {
  5. this.getEl().dom.submit();
  7. },

这是API里指定的用法，可是我这么做确不能正确提交FORM ，仔细检查后发现ext生成的html代码中这个form没有action项，只有id和method，通过form的url属性和在submit参数中直接添加url或者action貌似都不起作用。

所以我在这里又加了一句：this.getEl().dom.action='../userlogin.do';在提交表单的时候 直接把FORM的action属性设置到html里

这样就可以正确提交了，但不知道是不是最好的方法。

button的handler属性值确定了两个按钮按下时触发的方法。

js 代码
  1. function reset(){
  2. simple.form.reset();
  3. }
  4. function login(item){
  5. simple.form.submit();
  7. }
当然也可以在login中使用dwr进行ajax形式的表单提交。
分享到：
| 根据用户权限动态生成菜单
评论
19 楼 shazhenzhong 2008-12-23  
1 jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jsp/resources/css/ext-all.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/hospital/layouts/password.js"></script>
</head>
<body>

</body>
</html>

2 使用的js
var simple;
Ext.onReady(function(){
var bd = Ext.getBody();
simple = new Ext.form.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'./user.jsp',
method:'POST',
frame:true,
title: '修改密码', 
bodyStyle:'padding:5px 5px 0',
width: 300,
defaults: {width: 200},
defaultType: 'textfield',
//实现非AJAX提交表单一定要加下面的两行！
onSubmit: Ext.emptyFn,
submit: function() {
//有疑问的地方
this.getEl().dom.action='./user.jsp';
this.getEl().dom.submit();
},
items: [{
fieldLabel: '原始密码',
id: 'username',
allowBlank:false,
width:150
},{
fieldLabel: '新密码',
id: 'password',
allowBlank:false,
width:150,
inputType:'password'
},{
fieldLabel: '确认密码',
id: 'newpassword',
allowBlank:false,
width:150,
inputType:'password'
}
],
buttons: [{
text: '保存',
type:'button',
id:'login',
handler: login
},{
text: '重置',
type:'reset',
id:'clear',
handler: reset
}
]
});

simple.render(bd);

});
function reset(){
simple.form.reset();
}
function login(item){
simple.form.submit();

}
18 楼 gyb_sx 2008-07-03  
能不能也给我一份email:gyb_sx@126.com
谢谢
17 楼 yangfengjob 2008-06-02  
这个可以加上target=""吗.我想把返回的结果显示在另一个ifame中
16 楼 yangfengjob 2008-06-02  
this.getEl().dom.action='setReportParams';
this.getEl().dom.submit();
这两句是啥意思啊..
15 楼 JaNer 2008-05-26  
我也遇到了问题EXT + Struts的时候
这是我的旧命帖:
http://www.iteye.com/topic/196699
先用你的方法试试看~
14 楼 zhangygood 2008-03-26  
可以发给我一份吗？谢谢
zhangy1207@163.com
13 楼 kaki 2008-02-12  
前端本来就可以直接转换成json，为什么不用呢？？
12 楼 SeanHe 2008-02-04  
function login(item){
simple.getForm().getEl().dom.action=......htm';
simple.getForm().getEl().dom.submit();
}

貌似这样写才能正确提交
11 楼 jansonzhan 2007-12-28  
可以发一份给我嘛？谢谢！
jansonzhan@126.com
10 楼 rwhanson 2007-12-21  
hi 兄弟,我初学ext2.0,正做这方面的项目,遇到了困难,
能不能给我发一份完整的代码.renwei0121@yahoo.com.cn
9 楼 liliang_xf 2007-12-19  
同上，LZ能不能也给我发一份。谢谢！
liliang_xf@163.com
8 楼 liliang_xf 2007-12-19  
同上， 能不能发一份完整的代码给我。
liliang_xf@163.com
7 楼 hanyuhaha 2007-12-06  
thanks
6 楼 andrewdu 2007-12-02  
因为你使用了var simple = new Ext.form.FormPanel({
所以submit的隐含方法应该是下面这个形式 
submit: function() {
            this.getForm().getEl().dom.submit();
        }



如果你要使用下面的代码来提交 
this.getEl().dom.submit();

那么你要使用Ext.form.BasicForm 来创建
5 楼 lcq2009 2007-11-22  
我也是Ext的FS，谢谢大家发这么好的例子[size=24][/size]
4 楼 lcq2009 2007-11-22  
哥们，把你写的这个例子发到我Email：lcq2009@163.com

里面一起研究这个Ext，这样我们都可以很好的交流，人多力量大，谢谢！
3 楼 beckrabbit 2007-11-03  
lzhxq 你用firebug看一下你的“this”指的是什么
如果this.getEl().dom得到的不是这个FORM的DOM当然不会有效果了
2 楼 lzhxq 2007-11-01  
试过你的方法增加：this.getEl().dom.action='../userlogin.do';
但是根本没有生成FORM的action。
1 楼 bhuang 2007-10-18  
初学中，我为什么运行你的代码不成功。能不能发一封完整的代码。

hbin81@163.com

谢谢！！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXT异步提交FORM表单

    EXT异步提交FORM表单的核心是通过Ajax技术实现表单数据的后台提交，而无需刷新整个页面。这种方式的主要优点在于能够提供更加流畅的用户交互体验，同时减少了服务器端的负载压力。 ##### 2.2 实现步骤 1. **初始化...

    完成的 Ajax 提交表单

    2. **Ajax提交表单**：当表单需要异步提交时，可以利用`Ext.Ajax.request`方法。这个方法接受一个配置对象，其中包含了URL、方法（GET或POST）、数据、成功和失败的回调函数等参数。在本例中，你可能将表单的提交...

    Ext2.0 form使用实例的例程

    7. **表单提交（Form Submission）**：表单可以以两种方式提交：异步（Ajax）或同步（传统的HTTP请求）。异步提交在后台处理数据，不会刷新整个页面，提供了更好的用户体验。 8. **自定义组件（Custom Components）...

    ext_表单提交_数据校验

    其中，`form.submit()`是Ext默认的提交方式，它利用Ajax技术进行数据传输，无需刷新整个页面即可完成数据的提交和响应处理，极大地提升了用户体验。 - **原始的Form提交**：直接使用HTML表单的`submit`方法，适用于...

    Ext ajax 上传文件

    在HTML中，`&lt;input type="file"&gt;`元素用于让用户选择本地文件，然后通过表单提交或使用Ajax进行非表单提交。Ajax文件上传通常结合FormData对象来实现，它允许我们发送二进制数据，如图片、文档等。 在Ext JS中，...

    ext form 表单提交数据的方法小结

    1. EXT的form表单AJAX提交（默认提交方式） EXT的form表单默认采用AJAX方式进行数据提交，这样可以在不刷新页面的情况下与服务器进行异步交互。以下是一个简单的示例： ```javascript function login(item) { if ...

    EXT提交服务器的三种方式

    1. **EXT的Form表单AJAX提交**：这是EXT中最常见的提交方式，它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法，你可以方便地触发表单的提交，并指定URL、HTTP方法以及额外的参数。...

    ext 表单提交

    通常，Ext JS的表单提交使用Ajax方式，这意味着它可以异步地将表单数据发送到服务器，无需页面刷新。这种方式提供了更好的用户体验，因为用户可以在数据提交的同时继续与应用交互。 在Ext JS中，表单（`Ext.form....

    ext 2.0 form demo

    1. 数据提交：EXT 2.0表单支持AJAX提交，可以在后台处理数据验证和保存，无需页面刷新。 2. 表单加载与填充：可以从服务器动态加载表单数据，或根据用户选择填充表单。 3. 表单重置：方便地清空表单字段，恢复到...

    EXT 表单验证EXT 表单验证

    2. **实时验证**：EXT表单支持实时验证，这意味着当用户在输入字段中键入内容时，系统会立即检查数据的有效性，并显示相应的错误提示。这是通过监听`change`事件和调用`validate()`方法实现的。 3. **自定义vtype**...

    Ext 动态加载表单数据

    Ext Form提供了一种结构化的方式来组织这些字段，并提供了验证、提交和数据绑定等功能。 动态加载表单数据涉及到的主要知识点包括： 1. **JSON数据格式**：JSON（JavaScript Object Notation）是一种轻量级的数据...

    EXT dojochina ExtAjax表单提交 L9.rar

    当用户填写完表单并点击提交按钮时，我们通常会使用`Ext.Ajax`对象来实现非刷新的Ajax提交。 "ExtAjax表单提交 L9"可能指的是教程的第九个部分，讲解了如何在EXTJS中实现Ajax表单提交。在EXTJS中，表单的提交过程...

    ExtJs4.0 表单提交Demo

    在使用Ext Ajax提交表单前，通常需要先将表单数据序列化为JSON或URL编码格式。ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例，然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 ...

    EXT中文文档,EXT简明教程（Ajax框架）

    你可以通过这个文档了解到EXT的基础组件，如表格（Grid）、面板（Panel）、窗口（Window）、表单（Form）等，以及如何进行布局管理、数据绑定、Ajax通信等核心功能。同时，它还涵盖了EXT的高级特性，如树形视图...

    ext控件form相关配置

    其中，`Form`控件是Ext JS中一个非常重要的组成部分，它为开发者提供了创建各种类型表单的功能，包括简单的登录表单到复杂的多步骤表单。本文将深入探讨Ext JS中的`Form`控件及其相关配置，帮助开发者更好地理解和...

    Ext 入门 登陆验证表单提交

    在EXTJS中，我们可以使用`Ext.application`方法初始化应用，并在`views`配置中定义表单视图。表单通常由`Ext.container.Container`或`Ext.form.Panel`创建，包含`Ext.form.field.Text`（用户名）和`Ext.form.field....

    EXT制作的FORM，可以与Servlet进行交互

    EXT form支持使用`Ext.Ajax`类来进行AJAX提交。当用户填写完表单并点击提交按钮时，可以通过`form.submit()`方法将数据异步发送到服务器。在提交过程中，我们可以设置URL（对应Servlet的URL），以及成功和失败的回...

    EXT的3中提交方式

    本文详细介绍了EXT框架中三种主要的提交方式：`form`提交、`Ajax`提交以及同步提交。每种方式都有其适用场景和特点，开发者可以根据实际需求选择合适的方法。需要注意的是，在现代Web应用中，由于用户体验的重要性，...

Magicbox
Global site tag (gtag.js) - Google Analytics