Extjs的三种提交方式:

表单Ajax提交,普通提交,单独Ajax提交;

1.表单ajax提交(默认提交方式)

提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交。提交数据后根据后台的返回值不同来回调success或者failure函数(和单独ajax的提交不同),后台返回值的形式:
【如果返回outputResult(“{success:true}”),则调用success的函数。如果返回:outputResult(“{success:false,reason:’”+e.getCause() +”‘}”); 则调用failure函数】

function btn (){

form.getForm.submit({

method:’POST’,

params:{}, // 传递的参数

url:save_url, // 定义要跳转的url,此为属性必须要有

success: function(form,action){

//Ext.Msg.alert(‘信息’,”提示:”+”response.responseText”);//加粗体是得到后台的具体返回信息。

Ext.Msg.alert(‘提示’,”数据修改成功”);// 成功提示信息

store.load(); // 重新加载数据

},

failure:function(form,action){

Ext.Msg.alert(‘提示’,”跳转失败”);

}

});

}

2.普通提交:按照表单中的name提交。

Form. = new Ext.FormPanel({

……..// form的属性

submit:function(){

this.getEl().dom.action =’url’;// 提交的url

this.getEl().dom.method = ‘post’;

this.getEl().dom.submit();

},

});

当按提交按钮时,执行下面函数:

function btn (){

Form.form.submit();

}

3.extjs的普通ajax提交:

当按下提交按钮是执行次函数:(注意:不能对form表单提交,也就是说也不能按form中的表单的name提交,只能提交params中的参数。只要能够提交到后台不管数据能否正确执行就回调success函数,如果网络有故障,或者页面有错误数据到不了后台,就执行failure函数。

后台返回值的形式:【如果数据处理成功返回outputResult(“{success:true,’……..’}”)。如果数据处理失败返回:outputResult(“{success:false,reason:’”+e.getCause() +”‘}”);】

我们一般要求是:数据处理成功后显示成功信息,失败后显示失败信息。

但是这种提交不管返回什么值,都会执行success函数。所以不能满足我们的要求。为了解决这个矛盾我们有一下方法:

我们在js页面中的success函数中取得返回值,我们对返回值进行判断,如果success是true我门就打印成功信息,如果success是false我们就打印失败的提示。

取得返回值:var responseArray = Ext.util.JSON.decode(response.responseText); 判断如下:

function btn(){

…..// 定义url,也可以在方法外面

Ext.Ajax.request({

url:url,// 要跳转的url,此为属性必须要有

method:’post’,

params:{}, // 提交参数

success: function(response, options)

{

var responseArray = Ext.util.JSON.decode(response.responseText);

if(responseArray.success==true)

{

Ext.example.msg(‘提示’, ‘数据保存成功’);

}

else{

Ext.Msg.alert(‘错误’, responseArray.reason);

}

}

failure:function(response,options)

{

Ext.Msg.alert(‘警告’,”数据处理错误原因\”+response.responseText);

}

});

}

json数据格式

{"success":"true","data":{"id":"49","name":"12344553252","description":"adffafdadf"}}

格式很重要,格式正确才能够在form里面读出来。

普通方式提交:

text: "普通方式",
                    handler:function(){
                        if(form1.form.isValid()){
                            //只用指定TextField的id或者name属性,服务器端Form中就能取到表单的数据
                            //如果同时指定了id和name,那么name属性将作为服务器端Form取表单数据的Key
                            var form = form1.getForm().getEl().dom;
                            form.action = 'submit.aspx?method=Submit1&param1=abc';
                            //指定为GET方式时,url中指定的参数将失效,表单项转换成url中的key=value传递给服务端
                            //例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
                            //form.method = 'GET';//GET、POST
                            form.submit();
                        }
                    }

默认的Ajax方式提交

Extjs 表单提交送给新手的更多相关文章

  1. EXTJS 表单提交

    EXTJS框架中,在提交表单时,可有3种方式: 方法一: 普通的 Form 提交方式, 主要使用 form.submit() 方法来将表单提交到后台,在后台是根据表单的 name 属性来获取表单中元素 ...

  2. ExtJS 表单 submit时错误处理

    这里不提success,提提Extjs 表单提交的failure方法. 在表单的提交中,当发生异常行为时通常分为三种情况 1. 无法连接到服务器 2. 表单验证错误 3. 业务逻辑错误 对应下面的代码 ...

  3. Extjs之表单提交

    Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 表单Ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的 btn函数,按照表单的 name进行提交. ...

  4. form表单提交数据编码方式和tomcat接受数据解码方式的思考

    http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html *********************************************** ...

  5. 详解JavaScript中的Url编码/解码,表单提交中网址编码

    本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数escape / unescape ...

  6. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

  7. Extjs表单控件入门

    ExtJs表单控件用formPanel来做为表单元素的容器.默认情况下,是使用Ajax异步提交. 大家知道要使用Extjs必须引入他的库,所以我们要引入以下几个文件: ext-all.css ext- ...

  8. 24.form表单提交的六种方式

    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...

  9. extjs表单验证

    extjs表单验证 //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext ...

随机推荐

  1. updatepanel 和 visibility 有一定冲突

    如果出现异常可以将 visibility换成 display

  2. python实现的、带GUI界面电影票房数据可视化程序

    代码地址如下:http://www.demodashi.com/demo/14588.html 详细说明: Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采 ...

  3. Android中可以做的两件坏事——破解锁屏密码和获取Wifi密码

    来源:http://blog.csdn.net/jiangwei0910410003/article/details/41800409 今天咋们来看一下我在现实中遇到的两个问题和解决方案 问题一:忘记 ...

  4. 《JAVA与模式》之适配器模式(转载)

    适配器模式比较简单,偷个懒,直接转载一篇. 个人理解: * 类适配器是通过继承来完成适配 * 对象适配器是通过传递对象来完成适配 * 不管哪种,其实都是通过引用特殊接口的对象来完成特殊接口的适配调用 ...

  5. -no-xrender will disable the qtwebkit

    -no-xrender will disable the qtwebkit         apt-get install libxrender-dev 来自为知笔记(Wiz)

  6. 2-05. 求集合数据的均方差(15) (数学啊 ZJU_PAT)

    题目链接:http://pat.zju.edu.cn/contests/ds/2-05 设计函数求N个给定整数的均方差.若将N个数A[]的平均值记为Avg,则均方差计算公式为: 输入格式说明: 第1行 ...

  7. STM32以太网ETH

    注:stm32F1系列中F103片上不含MAC控制器,所以不支持以太网,只有F105和F107才支持

  8. Ubuntu下设置环境变量

    Ubuntu下设置环境变量有三种方法,一种用于当前终端,一种用于当前用户,一种用于所有用户:   一:用于当前终端: 在当前终端中输入:export PATH=$PATH:<你的要加入的路径&g ...

  9. python标准库介绍——7 cmath 模块详解

    [Example 1-61 #eg-1-61] 所展示的 ``cmath`` 模块包含了一些用于复数运算的函数. ====Example 1-61. 使用 cmath 模块====[eg-1-61] ...

  10. MySQL数据分组GROUP BY 和HAVING

    对于分组的理解,可以这样:对GROUP BY子句后面跟随的列名进行分组,然后对每一个分组而不是整个表进行操作. 举例如下:在产品表中,检索每一个供应商提供的商品的数量. mysql> SELEC ...