`

Ext.Ajax简单介绍

阅读更多
其实Ext.Ajax的使用并不难,只是当初我一直不清楚如何获取其返回值,搞得郁闷了一阵子,以下是一个比较简单的例子

 1Ext.Ajax.request({
 2                    url: 'Register.aspx',
 3                    params: {
 4                        oper: 'login',
 5                        LoginEmail:Ext.get('LoginEmail').dom.value,
 6                        LoginPwd:Ext.get('LoginPwd').dom.value
 7                    }
,
 8                    success: function(response, options) {
 9                      var responseArray = Ext.util.JSON.decode(response.responseText);                                             
10                            if(responseArray.success=='true'){
11                                Cookies.set('Allcard_userName', responseArray.user);
12                                Ext.Msg.alert('信息','您已成功登录!',IsLogin);    
13                            }

14                            else{
15                                Ext.Msg.alert('失败','登录失败,请确认您的帐号密码无误!');    
16                            }

17                    }

18            }
);

代码说明:
2行:URL参数是要提交到的页面
3行:params是一个需要提交的参数集,使用逗号分隔
8行:当回调成功返回后要执行的函数
9行:获取服务器端的回调参数值
10行:对回调值进行判断处理

这里需要说明一下的是如何获取回调参数值,Extjs里是通过JSON的数据格式来获取参数的,因此在服务器端处理完事情后,回调的参数应该这样写:(以下是ASP.NET里的写法)

result = "{success:true,user:'winson'}";
Response.Write(result);
Response.End();

将数据以键值对的形式返回,接收时就可使用第一段代码里第9行的方法来接收,由于使用的是JSON格式,因此服务器端就可以非常方便地同时返回多个参数值了。

Ext.Ajax基本使用就是这样,其实也挺简单的,只是如果要在提交时增加Loading效果,那就比较麻烦了,呵,这里我也没深入研究

接下来还有比较复杂的表单应用!
分享到:
评论
2 楼 erikchang 2008-07-01  
1 楼 jmajia 2008-06-11  
很不错的文章,值得参考。Ext.Ajax 默认的是调用POST方法,那有没有办法设置调用GET方法呢?

相关推荐

    Ext2.0.2的Ajax请求拦截示例

    总结,本示例介绍了在Ext2.0.2中如何利用Ajax请求的拦截器进行预处理和后处理。通过`beforeSend`、`success`回调以及全局的`beforerequest`和`requestcomplete`事件,开发者可以在Ajax请求生命周期的各个阶段插入...

    Ext.js 6 示例学习

    "Ext.JS6学习文档.pdf"则可能是更系统化的教程,不仅包含了基本概念和API的介绍,也可能包括高级特性,如拖放功能、图表组件的复杂使用、高级布局、自定义组件开发等。此外,文档可能会深入讲解MVC(Model-View-...

    Apress.Pro.Ajax.and.Java.Frameworks.Jul.2006.HAPPY.NEW.YEAR.rar

    例如,jQuery的$.ajax()方法可以方便地发起Ajax请求,而Ext JS则提供了丰富的UI组件和强大的Ajax功能。 书中还可能会深入到JSON的使用,如何在服务器端生成JSON数据,并在客户端解析和展示。JSON-P(JSON with ...

    Ext.data专题

    ### Ext.data专题详解 #### 一、Ext.data概述 **Ext.data** 是一个重要的JavaScript库...此外,通过 **Ext.data.Connection** 的封装,使得使用Ajax变得更加简单高效。这对于构建现代化的Web应用程序是非常有用的。

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    例如,一个简单的ComboBox配置可能如下所示: ```javascript Ext.create('Ext.form.ComboBox', { fieldLabel: 'AutoComplete', store: { fields: ['id', 'name'], proxy: { type: 'ajax', url: 'auto_...

    Ext+JSP实现数据提交

    3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...

    ext几个实例

    【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...

    在.NET中使用Ext.Direct示例源代码

    在提供的压缩包文件名“MyFirstSample”中,我们可以推测这是入门示例,可能包含了一个简单的.NET应用程序,它定义了几个Ext.Direct服务,并且有对应的Ext JS前端代码来调用这些服务。这个示例可能会教导开发者如何...

    深入浅出Ext_JS:数据存储与传输

    通过Connection,开发者可以更简单地配置和执行Ajax请求,包括设置请求头、超时时间、附加参数、请求方法等。 下面是一个使用Ext.data.Connection的例子: ```javascript var conn = new Ext.data.Connection({ ...

    ext/ajax开发资料

    例如,一个简单的EXT Ajax GET请求可能如下所示: ```javascript Ext.Ajax.get({ url: 'data.json', // 请求的URL params: {key: 'value'}, // 发送的数据 success: function(response, opts) { var data = Ext....

    Ext Js权威指南(.zip.001

    1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1 ext designer / 18 1.4.2 在visual studio中实现智能提示 / 23 1.4.3 spket / 28 1.4.4 在eclipse中实现智能提示 / 32 1.5 如何获得帮助 / 32 1.6 本...

    使用extdirectspring最新库1.7实现Ext.direct的例子(完整工程)

    Ext.direct是一种在客户端JavaScript与服务器端Java之间进行高效通信的技术,由Sencha公司开发,主要用于构建富客户端应用程序。它提供了一种结构化的API,使得前端的Ext JS框架能够与后端服务进行无缝交互,简化了...

    Ext中文版手册最新版

    ExtCore的核心功能覆盖了DOM操作、Ajax请求、事件处理、动画效果、模板引擎以及面向对象(OO)机制等,几乎涵盖了Web前端开发的所有关键领域。这使得无论是简单的动态网页还是复杂的Web应用,都能从ExtCore中获益。 #...

    extjs非常好的几个例子,包括登陆,动态编辑表格等

    在EXTJS中,Ext.AJAX是进行异步数据通信的核心组件,简化了传统XMLHttpRequest对象的使用,使得与服务器端的数据交换变得更加简单。 在两个登录示例中,我们分别看到了基于HTML form表单和Ext.FormPanel的EXTJS登录...

    ext3.*画图的例子

    如果数据需要从后台获取,我们可以使用`Ext.data.JsonStore`或`Ext.data.Store`与`Ext.Ajax.request`结合。例如: ```javascript Ext.Ajax.request({ url: 'getData.php', // 后台数据接口 success: function...

    senchatouch通过Ajax连接ashx

    使用Ext.Ajax.request方法,可以在Sencha Touch中发起Ajax请求。 Ext.Ajax.request是Sencha Touch提供的一个便捷方式来发起Ajax请求。此方法用于与服务器端的ashx文件进行交互,ashx是一种在.NET环境中处理HTTP请求...

    Jquery+ext

    5. **视图层(View)**: 视图负责显示数据,EXT的组件系统使得创建复杂的用户界面变得简单。 6. **控制器(Controller)**: 控制器是MVC模式的一部分,用于处理事件和协调视图与模型之间的交互。 ### 结合使用...

    读Ext之十(解析JSON)

    4. **远程数据加载(远程Proxy)**:当数据源位于服务器端时,例如通过Ajax请求获取JSON数据,可以使用`Ext.data.proxy.Ajax`。在请求成功后,Store会调用Json Reader解析响应的JSON数据,并将数据加载到Store中。 ...

    extjs帮助文档

    - **概述**:Ext.Ajax类提供了一个简单的AJAX请求接口。 - **常用方法**: - `Ext.Ajax.request(config)`:发送AJAX请求。 - `Ext.Ajax.abort()`:取消正在发送的AJAX请求。 #### 二十六、Ext.data.Record类(第...

    EXT核心API详解.doc

    22. **Ext.data.Connection类**和**Ajax类**:提供了与服务器的数据交换功能,支持异步请求。 23. **Ext.data.Record类**:数据记录模型,用于存储和操作数据。 24. **Ext.data.DataProxy类**:数据代理,抽象了...

Global site tag (gtag.js) - Google Analytics