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

一、截图和示例共用Ext.FormPanel
　　　　1.1　　截图
　　　　　　

　　　　　　由于本文主要关注的是表单提交的几种方式，所以仅用了一个表单项以便于测试和减少示例代码。
　　　　1.2　　示例共用Ext.FormPanel

　　　　关于封装后的表单控件，可以参照系列的前几篇文章，也可以在后面的源代码里面找到相关的封装代码。
二、普通方式提交
　　　　适合一次操作页面，即提交后跳转到另外一个页面。
　　　　前台代码：

                    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

本文转自博客园农民伯伯的博客，原文链接：ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]，如需转载请自行联系原博主。

ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]相关推荐

？？？既然post可以将form 表单的数据提交到 jsp页面上面显示出来，为什么还要提交到servlet页面...
如题转载于:https://www.cnblogs.com/xuedexin/articles/5628736.html
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
Form表单之get提交与post提交
Form表单之get提交与post提交 Form表单的属性action 与method: 属性值 ...
表单及数据提交、表单的作用、服务端接收提交的数据、php处理数据流程、文件域及文件域中数据处理、php展示数据（响应）
表单及数据提交: 表单的作用: 用于收集相关信息:html中有专门提交数据的标签,可以很容易的收集用户输入的信息,这个标签有两个重要的属性:action表单提交的地址和method以什么方式提交表单, ...
form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式一,表单提交无反应有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
form表单的多种提交方式及提交前验证
以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1.无任何验证提交(最普通的提交) ...
利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...
Form表单实现异步的提交
Form表单实现异步的提交问题描述 <form>标签的一般情况下的默认写法是  <form met ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
php表单转json对象,form表单转Json提交的方法(推荐)
form表单转Json提交的方法(推荐) 先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":"&q ...

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

ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]相关推荐

最新文章

热门文章