1, EXT的form表单ajax提交(默认提交方式)
相对单独的ajax提交来说优点在于能省略写参数数组
将按钮添加单击事件,执行以下方法
function login(item) {
if (validatorForm()) {
// 登录时将登录按钮设为disabled,防止重复提交
this.disabled = true;
// 第一个参数可以为submit和load
formPanl.form.doAction('submit', {
url : 'user.do?method=login',
method : 'post',
// 如果有表单以外的其它参数,可以加在这里。我这里暂时为空,也可以将下面这句省略
params : '',
// 第一个参数是传入该表单,第二个是Ext.form.Action对象用来取得服务器端传过来的json数据
success : function(form, action) {
Ext.Msg.alert('操作', action.result.data);
this.disabled = false;
},
failure : function(form, action) {
Ext.Msg.alert('警告', '用户名或密码错误!');
// 登录失败,将提交按钮重新设为可操作
this.disabled = false;
}
});
this.disabled = false;
}
}
2、EXT表单的非ajax提交 在表单需加入下列代码
//实现非AJAX提交表单一定要加下面的两行! onSubmit : Ext.emptyFn, submit : function() {
//再次设定action的地址
this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';
//提交submit
this.getEl().dom.submit();
},
3、EXT的ajax提交
Ext.Ajax.request({
url: 'login.do', //请求地址
//提交参数组
params: {
LoginName:Ext.get('LoginName').dom.value,
LoginPassword:Ext.get('LoginPassword').dom.value
},
//成功时回调
success: function(response, options) {
//获取响应的json字符串
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success==true){
Ext.Msg.alert('恭喜','您已成功登录!');
} else{
Ext.Msg.alert('失败','登录失败,请重新登录');
}
}
});
分享到:
相关推荐
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
这里提到了EXTJS的四种异步提交方式,分别是基于EXT JS的Ajax方法、指定HTML表单的Ajax提交、EXT JS自定义表单的提交以及使用Action配置的提交。下面将详细解释这四种方式: 1. **基于EXT JS的Ajax方法**: 在`...
6. **远程验证(Remote Validation)**:在表单提交时,ExtJS可以实现远程字段验证,将用户输入的数据发送到服务器进行验证,确保数据的正确性。 7. **服务器端事件处理**:通过监听Ajax请求,服务器端可以响应ExtJS...
2. **actionCfg**:这是一个配置对象,用于定义具体的动作行为,比如提交数据的URL、请求方式等。 ### Action对象的配置数据 在`doAction`方法中,第二个参数是从`load`或`submit`方法传递过来的`Ext.form.Action`...
首先,了解ExtJS中的数据提交方式。在ExtJS中,我们可以使用`Ext.Ajax.request`或FormPanel的`submit`方法来发送POST请求。例如: ```javascript Ext.Ajax.request({ url: 'post.php', method: 'POST', params: ...
一种常见的方式是通过服务器端处理,EXTJS 发送请求,携带需要导出的数据,服务器端将这些数据转换为Excel 格式并返回给客户端。例如,文件"ExtJS实现Excel的导出功能_ns1990love的空间_百度空间.mht"可能包含了关于...
EXTJS表单支持两种主要的提交方式:异步(Ajax)提交和传统(Standard)提交。异步提交是EXTJS常用的提交方式,通过Ajax发送JSON或URL编码的数据到服务器,无须页面刷新,能实现更好的用户体验。而传统提交则会创建...
在ExtJS中,提交表单是一项常见的操作,用于将用户在表单中填写的数据发送到服务器进行处理。本文将详细讲解如何在ExtJS环境中实现表单的提交,并结合Java Web后端进行交互。 首先,我们需要了解ExtJS中的表单组件...
3. **布局管理**:框架内置了多种布局方式,如Fit布局、Border布局、Table布局等,用于自动调整组件的大小和位置,适应不同的屏幕尺寸和窗口大小。 4. **Ajax支持**:通过Ext.Ajax对象,开发者可以轻松地进行异步...
ExtJS是一种基于JavaScript的开源富客户端框架,特别适用于构建企业级的Web应用程序。在ExtJS 2.0版本中,这个框架提供了丰富的组件库、强大的数据管理以及灵活的布局管理,使得开发者能够创建功能强大、界面友好的...
6. **服务器端处理**: 在EXTJS中完成前端的文件选择和提交后,服务器端需要接收并处理这些上传请求。这通常涉及到接收文件流,将其保存到服务器的指定位置,并可能需要返回一些确认信息。 7. **进度条显示**: 虽然...
ExtJS还支持在不刷新页面的情况下进行数据交互,利用AJAX技术从服务器异步获取或提交数据。 ### ExtJS的版本和兼容性 ExtJS的发展经历了多个版本,从1.x到2.x,再到3.x。每一个新版本都是对旧版本的重构和增强,...
3. **异步提交**:由于文件可能很大,直接同步提交会阻塞页面,所以一般使用Ajax方式进行异步提交。`Ext.Ajax.request`可以用于发送异步请求,设置`useDefaultXhrHeader: false`可以避免与浏览器的默认行为冲突。 4...
总结来说,EXTJS 提供了两种主要的前后台数据交互方式:`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。前者适用于更灵活的异步请求,后者则适合于表单提交场景。在实际应用中,开发者应根据需求选择...
1. **文件上传**:在ExtJS的前端,创建一个文件上传组件,用户选择Excel文件后,通过Ajax提交到服务器。 2. **接收入口**:后端服务器接收到文件,将其保存到临时目录或者内存中。 3. **读取数据**:使用Apache POI...
用户可以通过EXTJS的FormPanel进行预订操作,提交表单数据到ASP.NET的服务器端方法,处理预订逻辑并返回响应。 EXTJS还支持Ajax通信,这与ASP.NET的MVC模式或Web Forms模式都非常契合。EXTJS的Ajax请求可以调用ASP...
7. **Ajax通信**:ExtJS内置了Ajax请求处理,可以方便地与服务器进行异步通信,实现数据的获取和提交。 8. **工具提示(ToolTip)**:可以为任何元素添加自定义的提示信息,提升用户体验。 9. **事件处理**:ExtJS...
2. **布局管理器**:ExtJS提供了多种布局方式,如fit布局、border布局、form布局等,以适应不同场景下的界面布局需求。 3. **数据绑定**:ExtJS支持双向数据绑定,使得UI与后台数据模型之间能保持同步,简化了数据...
5. **Ajax和JsonP**:ExtJS 2.1支持Ajax和JsonP通信方式,方便与服务器进行异步数据交换。JsonP用于跨域请求,尤其适合在单页应用中获取远程数据。 6. **表单组件**:ExtJS的FormPanel提供了丰富的表单元素,如...
2. **数据绑定**:ExtJS 提供了一种强大的数据绑定机制,允许UI组件与数据源进行双向绑定。这意味着当数据源发生变化时,界面上的显示也会自动更新,反之亦然。 3. **布局管理**:框架中的布局管理器(Layout ...