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個函數來處理。