ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]


前言
   忙的时候再一懒、再加上中途没能迅速解决一些问题,所以把文章拖延到了国庆,不过总算是在今天搞定了。这系列文章可能全部完成可能需要继续延后了,有计划继续写视频监控方面的文章,所以尽量合理安排吧 : )


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


推荐
  1.  EXTJS FORM技巧一表单不使用AJAX方式提交?
  2.  三种Ext提交数据的方法
  3.  ExtJS表单提交与加载全攻略


版本
  Ext 3.0


正文
  一、截图和示例共用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>
    关于封装后的表单控件,可以参照系列的前几篇文章,也可以在后面的源代码里面找到相关的封装代码。

  二、普通方式提交
    适合一次操作页面,即提交后跳转到另外一个页面。
    前台代码:
                    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指定也在注释里面有说明了。
     
  三、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个函数来处理。

  四、下载
    ExtJS2009-10-2.rar

结束语
  关于本章的内容项目的时候研究不多,一般够用就没有再深究,这里比较多的是搜集而来然后进行整理实践再写出来的,难免不全,欢迎大家补充 :)
posted @ 2009-10-02 23:37  农民伯伯  阅读(32412)  评论(9编辑  收藏  举报