ExtJS中的几种数据提交方式：

ExtJS中的几种数据提交方式：

1.表单Ajax提交（常用）

表单Ajax提交是我目前用的最多的一种，直接使用form.submit(),它会把form面板上的所有控件的值全部传递后台。Ajax的特点之一就是不刷新页面，提高用户体验。 后台必须返回JSON格式，success返回true则执行success:function(form, action)里面的代码，返回false则执行failure:function(form, action)中的代码。

1. 
   
2. var panel222=new Ext.form.FormPanel({
   
3. ……//form属性或配置项
   
4. buttons:[{
   
5.         text:'保存',
   
6.         handler:function (){
   
7.                    var aa=stag.getForm();//获取面板
   
8.                    if(aa.isValid()){//通过验证
   
9.                        aa.submit({//提交
   
10.                                url : 'Form/stagingDateAdd.ashx',
    
11.                                method : 'POST',
    
12.                                waitTitle : "提示",//等待的标题
    
13.                                waitMsg : '正在提交数据...',//等待的信息
    
14.                                success : function(panel,action){
    
15.                                    Ext.Msg.alert('信息','信息提交成功！');
    
16.                                },
    
17.                                failure : function(form,action){
    
18.                                    Ext.Msg.alert('信息','信息提交失败！');
    
19.                                }
    
20.                        });
    
21.                    }
    
22.      }
    
23. }]
    
24. });                                                              
    
25. 
    
26. 
    

复制代码

2. 普通Ajax提交
这种提交方式可以设置传递到后台的参数，如果不想把面板上的控件全部传递到后台，就可以用这种提交方式。 需要注意的是，不管后台返回的信息是成功或失败都要执行success:function…，所以要在success方法里面判断一下返回的字符串，如果返回success:true,说明操作成功，返回success:false，说明操作失败。Failure方法是访问不到后台时执行的方法。

1. 
   
2. var formBasisContent=new Ext.form.FormPanel({
   
3. ……//form属性或配置项
   
4. buttons:[{
   
5.         text:"提交",
   
6.         handler:function(){
   
7.             varbasicForm=formBasisContent.getForm();
   
8.               if(basicForm.isValid()){
   
9.                 Ext.Ajax.request({
   
10.                       method:'POST',
    
11.                         [url='Form/BasisContentAdd.ashx]url:'Form/BasisContentAdd.ashx'[/url],
    
12.                         params:{ ID:ID },//想要传递到后台的参数
    
13.                         success:function(response,action){
    
14.                              var resp=Ext.util.JSON.decode(response.responseText);//获取从后台传递回来的字符串
    
15.                              if(resp .success==true )
    
16.                              {//提交成功，成功访问后台
    
17.                                  Ext.Msg.alert("提示","提交成功！");
    
18.                               }
    
19.                               else
    
20.                                  Ext.Msg.alert('错误',resp.errors.info);
    
21.                         },
    
22.                     failure:function(response,action){ //无法访问后台}
    
23. }]
    
24. });
    
25. 
    
26. 
    

复制代码

以上返回函数也可以这样写：

1. 
   
2. //指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。
   
3. 　　　　　callback: function(options, success, response) {
   
4. 　　　　　　　　if(success){
   
5.                                          MsgInfo(response.responseText);
   
6.                              }
   
7. 　　　　　}
   
8. 
   
9. 
   

复制代码

3.通过Ext.data.Connection提交数据
这种提交方式在grid中删除行时用到过。此提交方式没有限制返回的数据格式，不过我的项目后台返回的一直都是JSON格式数据，其他格式没有试过。

1. 
   
2. var conn=newExt.data.Connection();
   
3. conn.request({
   
4.    [url='Form/BasisContentDelete.ashx]url:'Form/BasisContentDelete.ashx'[/url],
   
5.    params:{ deleteID_basisContent:basisContentID },//要传递的参数
   
6.    method:'POST',
   
7.    scope:this,
   
8.    callback:function(options,success,response){//回调函数
   
9.         if(success )
   
10.          {//操作成功}
    
11.          else//操作失败
    
12.              Ext.Msg.alert("失败","删除失败，请重试！");
    
13.    }
    
14. })
    
15. 
    
16. 
    

复制代码

以上3种提交方式是我目前做项目时用到过的。下面是查资料时从网上看到的ExtJS提交方式。

4.普通方式提交
适合一次操作页面，即 提交后跳转到另外一个页面。

1. 
   
2. var form1= new Ext.FormPanel({
   
3.       ……//form属性或配置项
   
4. buttons:[{
   
5.         text:"提交",
   
6.         handler:function(){
   
7.              if(form1.form.isValid()){                           
   
8. //只用指定TextField的id或者name属性，服务器端Form中就能取到表单的数据
   
9.   //如果同时指定了id和name，那么name属性将作为服务器端Form取表单数据的Key
   
10.                      var form = form1.getForm().getEl().dom;
    
11.                      form.action = 'submit.aspx?method=Submit1&param1=abc';
    
12. //指定为GET方式时,url中指定的参数将失效，表单项转换成url中的key=value传递给服务端
    
13. //例如这里指定为GET的话,url为:submit.aspx?param2=你输入的值
    
14.                       form.method = 'GET';//GET、POST
    
15.                     form.submit();
    
16.                  }
    
17.          }
    
18. }]
    
19. });
    
20. 
    
21. 
    

复制代码

5.关于hmtl表单和extJS表单的Ajax提交方式之一
这种方式将为ext的ajax指定一个html表单，使用这种方式，不需要将待传递的参数进行封装（没有params属性，表单全部传递到后台）

1. 
   
2. function saveUser_ajaxSubmit2(){
   
3.       Ext.Ajax.request({
   
4.       url :'user_save.action',
   
5.        method : 'post',
   
6.        form : 'userForm',  // 指定表单
   
7.       success : function(response, options){//操作成功
   
8.            var o =Ext.util.JSON.decode(response.responseText);//获取后台返回JSON格式数据
   
9. alert(o.msg);
   
10.        },
    
11. failure : function() {//操作失败 }
    
12. });
    
13. }
    
14. 
    
15. 
    

复制代码

6.关于hmtl表单和extJS表单的Ajax提交方式之二
这种方式将html的表单转化为ext的表单进行异步提交，使用这种方式，需要定义好html的表单（同样不能指定传递参数）

1. 
   
2. function saveUser_ajaxSubmit4() {
   
3.    newExt.form.BasicForm('userForm').submit( {
   
4.        waitTitle : '请稍后...',
   
5.        waitMsg : '正在保存用户信息,请稍后...',
   
6.   url :'user_save.action',
   
7. method :'post',
   
8. success: function(form, action){
   
9. alert(action.result.msg);
   
10. },      
    
11. failure : function(form, action){
    
12. alert(action.result.msg);
    
13. }
    
14. });
    
15. }
    
16. 
    
17. 
    

复制代码