zoukankan      html  css  js  c++  java
  • 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)

    {

    Ext.example.msg(‘提示’, ‘数据保存成功’);

    }

    else{

    Ext.Msg.alert(‘错误’, responseArray.reason);

    }

    }

    failure:function(response,options)

    {

    Ext.Msg.alert(‘警告’,”数据处理错误原因”+response.responseText);

    }

    });

    }

    json数据格式

    {"success":"true","data":{"id":"49","name":"12344553252","description":"adffafdadf"}}

    格式很重要,格式正确才能够在form里面读出来。

    普通方式提交:

                        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();
                            }
                        }

                           

    默认的Ajax方式提交

    有很多梦想是遥不可及的,除非你坚持
  • 相关阅读:
    Spring Boot Sample 033之swagger3.0
    Spring Boot Sample 025之spring-boot-security-oauth2
    Spring Boot Sample 024之spring-boot-data-influxdb
    docker 安装redis /mysql/rabbitmq
    发布视频文件,并配置vtt格式的字幕文件
    Windows控制台用copy命令合并二进制文件
    Solaris修改IP地址
    为java程序配置网络访问代理
    apache2 httpd.conf 反向代理设置实例
    Apache配置正向代理与反向代理
  • 原文地址:https://www.cnblogs.com/wuhanly/p/4098281.html
Copyright © 2011-2022 走看看