Form表单（四） [ 数据提交 ]

系列
1. ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]
2. ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
3. ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
4. ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]

正文
1、截图和示例共用Ext.FormPanel
1.1 截图

因为本文主要关注的是表单提交的几种方式，因此仅用了一个表单项以便于测试和减小示例代码。
1.2 示例共用Ext.FormPanel
     < script type = " text/javascript " >
        Ext.onReady( function () {
           Ext.QuickTips.init();
           Ext.form.Field.prototype.msgTarget  =   ' side ' ;
            
             var  form1  =   new  Ext.FormPanel({
                frame:  true ,
                renderTo: Ext.getBody(),
                title:  ' <center>表单提交</center> ' ,
                style:  ' margin-left:auto;margin-right:auto;width:500px;margin-top:8px; ' ,
                labelAlign:  ' right ' ,
                labelWidth:  170 ,
                buttonAlign: ' center ' ,
                items: [ new  TextField( ' param2 ' , ' 表单项 ' )]
            });
        });
     < / script> 关于封装后的表单控件，能够参照系列的前几篇文章，也能够在后面的源代码里面找到相关的封装代码。

2、普通方式提交
适合一次操做页面，即提交后跳转到另一个页面。
前台代码：
                    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();
                        }
                    } 代码说明：这段代码加在buttons:[{}]里面中。
后台代码：
     ///   <summary>
     ///  POST普通提交
     ///   </summary>
     ///   <returns></returns>
     public   void  Submit1()
    {
         // 数据库操做
         string  param1  =  Request.QueryString[ " param1 " ];
         string  param2  =  Request.Form[ " param2 " ];
         // Response.Write(string.Format("param1(GET):{0}<br />param2(POST):{1}<br />", Request.QueryString["param1"], Request.Form["param2"]));
         // 页面掉转
        Response.Redirect( " esayadd.aspx " );
    }  普通提交我也翻阅了很多文章，在3.0版本中能够如上实现比较简单，或者直接设置FormPanel的 standardSubmit:true属性，则下面默认Ajax提交方式也将变成普通的表单提交。注意这里并不须要设置 onSubmit: Ext.emptyFn等，表单项的id和name指定也在注释里面有说明了。

3、Ajax方式提交
3.1 默认方式
客户端代码：
                    text:  " 默认方式 " ,
                    handler: function (){ 
                        form1.getForm().submit({
                            url: ' submit.aspx?method=Submit2&param1=abc ' ,
                             // method:'POST',
                             // waitTitle : "提示",
                             // waitMsg: 'Submitting your data',
                            success:  function (form, action){
                                alert(action.response.responseText);
                            },
                            failure:  function (form, action){
                                alert(action.result.errormsg);
                            }
                        });
                    } 服务器端代码：
     ///   <summary>
     ///  默认方式
     ///   </summary>
     public   void  Submit2()
    {
         string  param1  =  Request.QueryString[ " param1 " ];
         string  param2  =  Request.Form[ " param2 " ];
         // 必须返回JOSIN形式数据
        Response.Write( " {success:true} " );
        Response.End();
    } 代码说明：
a). 服务器端必须返回JSON格式，success返回true则执行 success:  function (form, action)里面的代码，返回false则执行 failure:  function (form, action)中的代码。
b). 服务器端必须 Response.End();
写测试代码的时候就是由于没有按这个格式返回，一直觉得客户端代码是否有问题，耽误了挺多时间。

3.2 经过Ext.data.Connection提交数据
客户端代码：
                    text:  " Connect方式 " ,
                    handler: function (){ 
                         // 注意
                         var  conn  =   new  Ext.data.Connection();
                        conn.request({
                            url:  ' submit.aspx?method=Submit4 ' ,
                             // 此处与params对应，若是为POST，则服务器端从Request.Form中能够取获得数据，反之从QueryString中取数据
                            method:  ' POST ' , // GET
                            params:form1.form.getValues(),
                            success:  function (response, opts) {
                                 MsgInfo(response.responseText);
                            }
                        });
                    } 服务器端代码：
     // / <summary>
     // / Connect方式
     // / </summary>
    public  void  Submit3()
    {
        string param1  =  Request.QueryString[ " param1 " ];
        string param2  =  Request.Form[ " param2 " ];
        Response.Write( " ok " );
        Response.End();
    } 代码说明：
这里就没有限制返回的数据格式了，但仍须要设置Response.End()，因此默认在PageBase里面设置了此代码。

3.3 经过Ext.Ajax提交数据
客户端代码：
                     // Ext.Ajax是继承Ext.data.Connection而来
                    text:  " Ajax方式 " ,
                    handler: function (){ 
                        Ext.Ajax.request({
    url:  ' submit.aspx?method=Submit3 ' ,
    method:  ' POST ' ,
     // jsonData://指定须要发送给服务器端的JSON数据。若是指定了该属性则其它的地方设置的要发送的参数值将无效。
     // xmlData://指定用于发送给服务器的xml文档,若是指定了该属性则其它地方设置的参数将无效。
    params:form1.form.getValues(), // 取得key/value对象数组
     // 指定Ajax请求的回调函数，该函数无论是调用成功或失败，都会执行。
    callback:  function  (options, success, response) {
           if (success){
        MsgInfo(response.responseText);
    }
    }
        });
                    } 服务器端代码：
     ///   <summary>
     ///  Ajax方式
     ///   </summary>
     public   void  Submit4()
    {
         string  param1  =  Request.QueryString[ " param1 " ];
         string  param2  =  Request.Form[ " param2 " ];
        Response.Write( " yes " );
        Response.End();
    } Ajax方式提交总结：
a). 服务器端处理返回数据后都须要 Response.End(); b). 很明显，Ajax的特色之一就是不刷新页面，提升用户体验。 c). 回调分为callback和success+failure两种方式，后面是将前面的拆成2个函数来处理。