`
wjt276
  • 浏览: 650303 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

ExtJS提交服务器的三种方式

阅读更多
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

    在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...

    extjs四种异步提交

    这里提到了EXTJS的四种异步提交方式,分别是基于EXT JS的Ajax方法、指定HTML表单的Ajax提交、EXT JS自定义表单的提交以及使用Action配置的提交。下面将详细解释这四种方式: 1. **基于EXT JS的Ajax方法**: 在`...

    ExtJs的服务器端控件实现

    6. **远程验证(Remote Validation)**:在表单提交时,ExtJS可以实现远程字段验证,将用户输入的数据发送到服务器进行验证,确保数据的正确性。 7. **服务器端事件处理**:通过监听Ajax请求,服务器端可以响应ExtJS...

    ExtJs实现数据加载和提交经典代码

    2. **actionCfg**:这是一个配置对象,用于定义具体的动作行为,比如提交数据的URL、请求方式等。 ### Action对象的配置数据 在`doAction`方法中,第二个参数是从`load`或`submit`方法传递过来的`Ext.form.Action`...

    extjs_php向后台提交json_post的接收方法实例

    首先,了解ExtJS中的数据提交方式。在ExtJS中,我们可以使用`Ext.Ajax.request`或FormPanel的`submit`方法来发送POST请求。例如: ```javascript Ext.Ajax.request({ url: 'post.php', method: 'POST', params: ...

    extjs 导入导出 Exel

    一种常见的方式是通过服务器端处理,EXTJS 发送请求,携带需要导出的数据,服务器端将这些数据转换为Excel 格式并返回给客户端。例如,文件"ExtJS实现Excel的导出功能_ns1990love的空间_百度空间.mht"可能包含了关于...

    learning extjs 中文版 表单提交

    EXTJS表单支持两种主要的提交方式:异步(Ajax)提交和传统(Standard)提交。异步提交是EXTJS常用的提交方式,通过Ajax发送JSON或URL编码的数据到服务器,无须页面刷新,能实现更好的用户体验。而传统提交则会创建...

    如何提交Extjs 中的表单

    在ExtJS中,提交表单是一项常见的操作,用于将用户在表单中填写的数据发送到服务器进行处理。本文将详细讲解如何在ExtJS环境中实现表单的提交,并结合Java Web后端进行交互。 首先,我们需要了解ExtJS中的表单组件...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    3. **布局管理**:框架内置了多种布局方式,如Fit布局、Border布局、Table布局等,用于自动调整组件的大小和位置,适应不同的屏幕尺寸和窗口大小。 4. **Ajax支持**:通过Ext.Ajax对象,开发者可以轻松地进行异步...

    ExtJs2.0学习系列

    ExtJS是一种基于JavaScript的开源富客户端框架,特别适用于构建企业级的Web应用程序。在ExtJS 2.0版本中,这个框架提供了丰富的组件库、强大的数据管理以及灵活的布局管理,使得开发者能够创建功能强大、界面友好的...

    extjs上传全代码

    6. **服务器端处理**: 在EXTJS中完成前端的文件选择和提交后,服务器端需要接收并处理这些上传请求。这通常涉及到接收文件流,将其保存到服务器的指定位置,并可能需要返回一些确认信息。 7. **进度条显示**: 虽然...

    ExtJS教程_完整版

    ExtJS还支持在不刷新页面的情况下进行数据交互,利用AJAX技术从服务器异步获取或提交数据。 ### ExtJS的版本和兼容性 ExtJS的发展经历了多个版本,从1.x到2.x,再到3.x。每一个新版本都是对旧版本的重构和增强,...

    ExtJS4.0下的文件上传方式代码filesupload

    3. **异步提交**:由于文件可能很大,直接同步提交会阻塞页面,所以一般使用Ajax方式进行异步提交。`Ext.Ajax.request`可以用于发送异步请求,设置`useDefaultXhrHeader: false`可以避免与浏览器的默认行为冲突。 4...

    extjs文档的详细介绍

    总结来说,EXTJS 提供了两种主要的前后台数据交互方式:`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。前者适用于更灵活的异步请求,后者则适合于表单提交场景。在实际应用中,开发者应根据需求选择...

    ExtJS poi 导入excel

    1. **文件上传**:在ExtJS的前端,创建一个文件上传组件,用户选择Excel文件后,通过Ajax提交到服务器。 2. **接收入口**:后端服务器接收到文件,将其保存到临时目录或者内存中。 3. **读取数据**:使用Apache POI...

    asp.net下extjs完整实例

    用户可以通过EXTJS的FormPanel进行预订操作,提交表单数据到ASP.NET的服务器端方法,处理预订逻辑并返回响应。 EXTJS还支持Ajax通信,这与ASP.NET的MVC模式或Web Forms模式都非常契合。EXTJS的Ajax请求可以调用ASP...

    中文的Extjs的api手册

    7. **Ajax通信**:ExtJS内置了Ajax请求处理,可以方便地与服务器进行异步通信,实现数据的获取和提交。 8. **工具提示(ToolTip)**:可以为任何元素添加自定义的提示信息,提升用户体验。 9. **事件处理**:ExtJS...

    ExtJS_3.3中文

    2. **布局管理器**:ExtJS提供了多种布局方式,如fit布局、border布局、form布局等,以适应不同场景下的界面布局需求。 3. **数据绑定**:ExtJS支持双向数据绑定,使得UI与后台数据模型之间能保持同步,简化了数据...

    extjs2.1库文件

    5. **Ajax和JsonP**:ExtJS 2.1支持Ajax和JsonP通信方式,方便与服务器进行异步数据交换。JsonP用于跨域请求,尤其适合在单页应用中获取远程数据。 6. **表单组件**:ExtJS的FormPanel提供了丰富的表单元素,如...

    ExtJS 3.4.0

    2. **数据绑定**:ExtJS 提供了一种强大的数据绑定机制,允许UI组件与数据源进行双向绑定。这意味着当数据源发生变化时,界面上的显示也会自动更新,反之亦然。 3. **布局管理**:框架中的布局管理器(Layout ...

Global site tag (gtag.js) - Google Analytics