Extjs中三种不同的数据提交方式

Extjs中三种不同的数据提交方式

 

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)

{

1.表单ajax提交（默认提交方式）

另附1：

]

博主注：这里的error未查明是否是保留的属性，不过在从服务器返回的json字符串可以包含任意定义的键值对：例如       Response.Write("{success:false,  data111: { first: 'tom', last: 'king', company: 'microsoft', email: 'czclkg@21cn.com', time: '10:00am' }}");

前台：

buttons: [{
                   text: 'submit',

                   handler: function () {
                       frm.getForm().submit({
                           //method1:
                           // url: 'jsonresponse.aspx?userName=chen&pwd=123',                         
                         
                           //method2:说明，这里通过method设为get，则url中指定的参数将失效（如method1中userName和pwd），表单项转换成url中的key=value传递给服务端
                            url: 'jsonresponse.aspx',
                              method: 'get',
                              params: {userName:'chen',pwd:'123'},


                           success: function (f, a) {
                               Ext.Msg.alert('Success', 'It worked');
                           },
                           failure: function (f, a) {
                               Ext.Msg.alert('Warning', a.result.data111.first);
                           }
                       });
                   }

               }]

是可以接收到data111的

附2：

3.extjs的普通ajax提交：