extJS中常用的4種Ajax異步提交方式

 這篇文章主要介紹了extJS中常用的4種Ajax異步提交方式,需要的朋友可以參考下

/**   代碼如下: * 第一種Ajax提交方式  * 這種方式需要直接使用ext Ajax方法進行提交  * 使用這種方式，需要將待傳遞的參數進行封裝  * @return  */  function saveUser_ajaxSubmit1() {  Ext.Ajax.request( {  url : 'user_save.action',  method : 'post',  params : {  userName : document.getElementById('userName').value,  password : document.getElementById('password').value  },  success : function(response, options) {  var o = Ext.util.JSON.decode(response.responseText);  alert(o.msg);  },  failure : function() {  }  });  }  /**  * 第二種Ajax提交方式  * 這種方式將為ext的ajax指定一個html表單  * 使用這種方式，不需要將待傳遞的參數進行封裝  *  * @return  */  function saveUser_ajaxSubmit2() {  Ext.Ajax.request( {  url : 'user_save.action',  method : 'post',  form : 'userForm', // 指定表單  success : function(response, options) {  var o = Ext.util.JSON.decode(response.responseText);  alert(o.msg);  },  failure : function() {  }  });  }  /**  * 第三種Ajax提交方式  * 這種方式將為ext的自己的表單進行提交  * 使用這種方式，需要使用ext自己的textField組件  *  * @return  */  function saveUser_ajaxSubmit3() {  // 定義表單  var formPanel = new Ext.FormPanel( {  labelWidth : 75,  frame : true,  bodyStyle : 'padding:5px 5px 0',  width : 350,  defaults : {  width : 230  },  defaultType : 'textfield',  items : [ {  fieldLabel : '用戶名',  name : 'userName',  allowBlank : false  }, {  fieldLabel : '密 碼',  name : 'password'  } ]  });  // 定義窗口  var win = new Ext.Window( {  title : '添加用戶',  layout : 'fit',  width : 500,  height : 300,  closeAction : 'close',  closable : false,  plain : true,  items : formPanel,  buttons : [ {  text : '確定',  handler : function() {  var form = formPanel.getForm();  var userName = form.findField('userName').getValue().trim();  var password = form.findField('password').getValue().trim();  if (!userName) {  alert('用戶名不能為空');  return;  }  if (!password) {  alert('密碼不能為空');  return;  }  form.submit( {  waitTitle : '請稍後...',  waitMsg : '正在保存用戶信息,請稍後...',  url : 'user_save.action',  method : 'post',  success : function(form, action) {  alert(action.result.msg);  },  failure : function(form, action) {  alert(action.result.msg);  }  });  }  }, {  text : '取消',  handler : function() {  win.close();  }  } ]  });  win.show();  }  /**  * 第四種Ajax提交方式  * 這種方式將html的表單轉化為ext的表單進行異步提交  * 使用這種方式，需要定義好html的表單  *  * @return  */  function saveUser_ajaxSubmit4() {  new Ext.form.BasicForm('userForm').submit( {  waitTitle : '請稍後...',  waitMsg : '正在保存用戶信息,請稍後...',  url : 'user_save.action',  method : 'post',  success : function(form, action) {  alert(action.result.msg);  },  failure : function(form, action) {  alert(action.result.msg);  }  });  }