关闭

extJs常用的四种Ajax异步提交

标签: ajax
336人阅读 评论(0) 收藏 举报
分类:

转自 : 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>");
           }  
           
           
       });

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:396196次
    • 积分:4741
    • 等级:
    • 排名:第6363名
    • 原创:17篇
    • 转载:382篇
    • 译文:0篇
    • 评论:31条
    最新评论