extJs常用的四种Ajax异步提交

转载 2015年07月09日 21:38:47

转自 : http://blog.csdn.net/hrl_100/article/details/5639922

  1. /** 
  2.  * <p> 
  3.  * 第一种Ajax提交方式 
  4.  * </p> 
  5.  * <p> 
  6.  * 这种方式需要直接使用ext Ajax方法进行提交 
  7.  * </p> 
  8.  * <p> 
  9.  * 使用这种方式,需要将待传递的参数进行封装 
  10.  * </p> 
  11.  *  
  12.  * @return 
  13.  */  
  14. function saveUser_ajaxSubmit1() {  
  15.     Ext.Ajax.request( {  
  16.         url : 'user_save.action',  
  17.         method : 'post',  
  18.         params : {  
  19.             userName : document.getElementById('userName').value,  
  20.             password : document.getElementById('password').value  
  21.         },  
  22.         success : function(response, options) {  
  23.             var o = Ext.util.JSON.decode(response.responseText);  
  24.             alert(o.msg);  
  25.         },  
  26.         failure : function() {  
  27.         }  
  28.     });  
  29. }  
  30. /** 
  31.  * <p> 
  32.  * 第二种Ajax提交方式 
  33.  * </p> 
  34.  * <p> 
  35.  * 这种方式将为ext的ajax指定一个html表单 
  36.  * </p> 
  37.  * <p> 
  38.  * 使用这种方式,不需要将待传递的参数进行封装 
  39.  * </p> 
  40.  *  
  41.  * @return 
  42.  */  
  43. function saveUser_ajaxSubmit2() {  
  44.     Ext.Ajax.request( {  
  45.         url : 'user_save.action',  
  46.         method : 'post',  
  47.         form : 'userForm'// 指定表单   /// 
  48.         success : function(response, options) {  
  49.             var o = Ext.util.JSON.decode(response.responseText);  
  50.             alert(o.msg);  
  51.         },  
  52.         failure : function() {  
  53.         }  
  54.     });  
  55. }  
  56. /** 
  57.  * <p> 
  58.  * 第三种Ajax提交方式 
  59.  * </p> 
  60.  * <p> 
  61.  * 这种方式将为ext的自己的表单进行提交 
  62.  * </p> 
  63.  * <p> 
  64.  * 使用这种方式,需要使用ext自己的textField组件 
  65.  * </p> 
  66.  *  
  67.  * @return 
  68.  */  
  69. function saveUser_ajaxSubmit3() {  
  70.     // 定义表单   
  71.     var formPanel = new Ext.FormPanel( {  
  72.         labelWidth : 75,  
  73.         frame : true,  
  74.         bodyStyle : 'padding:5px 5px 0',  
  75.         width : 350,  
  76.         defaults : {  
  77.             width : 230  
  78.         },  
  79.         defaultType : 'textfield',  
  80.         items : [ {  
  81.             fieldLabel : '用户名',  
  82.             name : 'userName',  
  83.             allowBlank : false  
  84.         }, {  
  85.             fieldLabel : '密   码',  
  86.             name : 'password'  
  87.         } ]  
  88.     });  
  89.     // 定义窗口   
  90.     var win = new Ext.Window( {  
  91.         title : '添加用户',  
  92.         layout : 'fit',  
  93.         width : 500,  
  94.         height : 300,  
  95.         closeAction : 'close',  
  96.         closable : false,  
  97.         plain : true,  
  98.         items : formPanel,  
  99.         buttons : [ {  
  100.             text : '确定',  
  101.             handler : function() {  
  102.                 var form = formPanel.getForm();  
  103.                 var userName = form.findField('userName').getValue().trim();  
  104.                 var password = form.findField('password').getValue().trim();  
  105.                 if (!userName) {  
  106.                     alert('用户名不能为空');  
  107.                     return;  
  108.                 }  
  109.                 if (!password) {  
  110.                     alert('密码不能为空');  
  111.                     return;  
  112.                 }  
  113.                 form.submit( {  
  114.                     waitTitle : '请稍后...',  
  115.                     waitMsg : '正在保存用户信息,请稍后...',  
  116.                     url : 'user_save.action',  
  117.                     method : 'post',  
  118.                     success : function(form, action) {  
  119.                         alert(action.result.msg);  
  120.                     },  
  121.                     failure : function(form, action) {  
  122.                         alert(action.result.msg);  
  123.                     }  
  124.                 });  
  125.             }  
  126.         }, {  
  127.             text : '取消',  
  128.             handler : function() {  
  129.                 win.close();  
  130.             }  
  131.         } ]  
  132.     });  
  133.     win.show();  
  134. }  
  135. /** 
  136.  * <p> 
  137.  * 第四种Ajax提交方式 
  138.  * </p> 
  139.  * <p> 
  140.  * 这种方式将html的表单转化为ext的表单进行异步提交 
  141.  * </p> 
  142.  * <p> 
  143.  * 使用这种方式,需要定义好html的表单 
  144.  * </p> 
  145.  *  
  146.  * @return 
  147.  */  
  148. function saveUser_ajaxSubmit4() {  
  149.     new Ext.form.BasicForm('userForm').submit( {  
  150.         waitTitle : '请稍后...',  
  151.         waitMsg : '正在保存用户信息,请稍后...',  
  152.         url : 'user_save.action',  
  153.         method : 'post',  
  154.         success : function(form, action) {  
  155.             alert(action.result.msg);  
  156.         },  
  157.         failure : function(form, action) {  
  158.             alert(action.result.msg);  
  159.         }  
  160.     });  
  161. }  

 

 

第二种方式 ,实际使用中的例子

 

     Ext.Ajax.request( {  
          url :  '/systemFile.do?method=addFileForJsp&type=fujian&tid='+ id  ,  
          method : 'post',  
          form : document.forms[0], // 指定表单   
          success : function(response, options) {
        fujianlist(id) ;
     top.Ext.exmsg("提示", "<font color=green>附件添加成功!</font>");
    }, 
          failure : function(form, action) {  
             top.Ext.exmsg("提示", "<font color=red>附件上传失败!</font>");
           }  
           
           
       });

相关文章推荐

extJs常用的四种Ajax异步提交

extJs常用的四种Ajax异步提交 转自 : http://blog.csdn.net/hrl_100/article/details/5639922 /**  *   * ...
  • cai5
  • cai5
  • 2011年08月26日 15:29
  • 1350

extJS常用的4中Ajax异步提交

extJS常用的AJAX异步提交

Extjs用ajax提交表单四种方式

/**   *    * 第一种Ajax提交方式   *    *    * 这种方式需要直接使用ext Ajax方法进行提交   *    *    * 使用这种方式,需要将待传递的...

Extjs用ajax提交表单四种方式

view plain /**   *    * 第一种Ajax提交方式   *    *    * 这种方式需要直接使用ext Ajax方法进行提交   *    * ...

四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比

AJAX 是web2.0 的基石,现在网上流行几种开源的AJAX框架,比如:jQuery,Mootools,Dojo,Ext JS等等,那么我们到底在什么情况下该使用那个框架?以下是一组摘抄的数据...
  • flfna
  • flfna
  • 2011年05月06日 17:06
  • 587

四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比

四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比 转贴于:http://www.cnblogs.com/yuqi2008/archive/2009/01/...

ExtJS4 ajax请求同步异步问题

今天在写代码过程中遇到一个奇怪的问题,事情是这样的,我写了一个简单的页面用来删除选中的用户,请看下面: 因为后台的servlet的代码实现了根据用户名来删除一条记录,所以我在前台的ExtJS代码里面用...

extjs ajax 异步请求正常同步请求出错问题的可能原因

之前该应用一直工作正常,突然有一天不能正常获取数据,跟踪该请求后发现, "Failed to set the 'timeout' property on 'XMLHttpRequest': time...

Extjs4.0 Ajax异步取值 动态创建Chart

注意使用的环境: 页面显示一个tab,tab中加载chart, 调用Ext.onReady(function(){});的时候要装载tab 由于chart中的数据都是从数据库中获得,这里必须要使...

使用BeginInvoke和EndInvoke进行异步调用的四种常用方法

使用BeginInvoke和EndInvoke进行异步调用的四种常用方法,每种方法都是通过BeginInvoke方法来启动异步方法,调用EndInvoke方法来完成异步调用。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:extJs常用的四种Ajax异步提交
举报原因:
原因补充:

(最多只允许输入30个字)